canvas 画线

最新推荐文章于 2020-01-07 10:16:19 发布

wangzhantao

最新推荐文章于 2020-01-07 10:16:19 发布

阅读量137

点赞数

CC 4.0 BY-SA版权

分类专栏： html5 文章标签：画线实例（天地）

本文链接：https://blog.youkuaiyun.com/wangzhantao/article/details/84254605

html5 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何使用HTML5的Canvas API来绘制汉字“天地”。通过JavaScript控制路径、线条样式等属性，实现了汉字的基本形状描绘。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>

<BODY>

<canvas id="myCanvans" width="400" height="400"></canvas>
[align=left]<div> 利用canvas 画出“天地”两个字</div>[/align]
</BODY>
<script language="javascript">

var canvas = document.getElementById("myCanvans");
var context = canvas.getContext("2d");

//横
context.beginPath();
context.moveTo(60,40);
context.lineTo(100,40);
context.strokeStyle="black";
context.lineWidth=5;
context.lineCap="round";//端点为圆弧的
context.stroke( );
//横
context.beginPath();
context.moveTo(40,70);
context.lineTo(120,70);
context.strokeStyle="black";
context.lineWidth=5;
context.lineCap="round";
context.stroke();
//撇
context.beginPath();
context.moveTo(80,40);
context.bezierCurveTo(80,70,80,90,20, 140 );
context.lineWidht=5;
context.lineCap="round";
contextStyle="black";
context.stroke();

//捺
context.beginPath();
context.moveTo(80,70);
context.bezierCurveTo(90,100,90,110,140,140);
context.lineWidth=5;
context.lineCap="round";
ccontextStyle="black";
context.stroke();

//地
context.beginPath();
context.moveTo( 200,70 );
context.lineTo( 240,70 );
contextStyle="black";
context.lineWidth=5;
context.lineCap="round";
context.stroke();

context.beginPath();
context.moveTo(200,140);
context.lineTo(240,120);
context.lineWidth=5;
context.lineCap="round";
context.stroke();

context.beginPath();
context.moveTo(220,40);
context.lineTo(220,130);
contextStyle="black";
context.lineWidth=5;
context.lineCap="round";
context.stroke();

context.beginPath();
context.moveTo(250,70);
context.lineTo( 325,70 );
context.stroke();

context.beginPath();
context.moveTo(325,70);
context.lineTo(325,110);
context.stroke();

context.beginPath();
context.moveTo(300,40);
context.lineTo(300,100);
context.stroke();

context.beginPath();
context.moveTo(275,40);
context.lineTo( 275,140);
context.stroke();

context.beginPath();
context.moveTo(275,140);
context.lineTo(345,140);
context.stroke();

context.beginPath();
context.moveTo(345,140);
context.lineTo(345,130);
context.stroke();

</script>

</HTML>