您的位置：首页 > Web前端 > HTML5

关于HTML5 的canvas

2012-11-25 16:54 323 查看 
<!DOCTYPE HTML>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

<script type="text/javascript">

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);//画了一个圆形
cxt.closePath();
cxt.fill();
cxt.moveTo(70,32);//这是一条线，这个坐标表示 线段开始的 x,y
cxt.lineTo(70,50);//这是线段结束的x,y坐标
cxt.stroke();//绘制图形的边线
cxt.moveTo(70,50);
cxt.lineTo(50,80);

cxt.stroke();
cxt.moveTo(70,50);
cxt.lineTo(90,80);
cxt.stroke();
cxt.moveTo(70,32);
cxt.lineTo(50,60);
cxt.stroke();
cxt.moveTo(70,32);
cxt.lineTo(90,60);
cxt.stroke();
</script>

</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航