<!DOCTYPE HTML> <!-- html5中需加入这个玩意，不然可能出错 -->
<html>
<body>
<canvas id="my" width="300" height="300" style="border:1px solid #c3c3c3">
<!--定义画布容器 注意在style中要选择画布边界的样式 -->
your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("my");
var cxt =c.getContext("2d");
cxt.moveTo(10,10); <!-- 初始位置 -->
cxt.lineTo(150,10); <!-- 划线 -->
cxt.lineTo(150,60);
cxt.lineTo(10,60);
cxt.lineTo(10,10);
cxt.stroke(); <!-- 有这个语句，才能把画的图案展示出来 -->
cxt.fillStyle="green";
cxt.beginPath(); <!-- 开始画图，此语句相当于另起炉灶 -->
cxt.arc(50,120,30,0,Math.PI,true); <!-- 这是画曲线的函数 -->
cxt.closePath(); <!-- 结束画图，有开始，就得有结束 ，貌似省略这一句影响不大-->
cxt.fill();
cxt.fillStyle="black";
cxt.beginPath(); <!-- 如果没有这一句，上面的半圆是黑色的 -->
cxt.moveTo(50,180);
cxt.lineTo(80,140);
cxt.lineTo(100,130);
cxt.lineTo(50,180);
cxt.stroke();
cxt.fill();
</script >
</body>
</html>
画出来的效果是这样的
网友评论