`

canvas 画线

画线实例（天地）
阅读更多
<!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>
<div>    利用canvas 画出“天地”两个字</div>

</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>
分享到：
| canvas
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics