H5利用canvas 元素在网页上绘制图形原理

admin · 发表于 2016-4-1 11:39:03

代码+注释

<!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");
/**
* 创建 context 对象：
* getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
*/
cxt.moveTo(10,10);
/*
* moveTo() 方法可把窗口的左上角移动到一个指定的坐标（起点）
* window.moveTo(x,y)
* */
cxt.lineTo(150,50);
/**
* 开始一条路径，移动到位置 0,0。创建到达位置 150,150 的一条线：
*/
cxt.lineTo(10,50);
/**
* 开始一条路径，移动到位置 0,0。创建到达位置 10,50 的一条线：
*/
cxt.stroke();
/*
* stroke() 方法绘制当前路径。
* */
</script>
</body>
</html>

复制代码

		自动登录	找回密码
密码			立即注册