html5的canvas简单使用_H5之家 - 中国HTML5教程资源分享第一站

canvas是html5中的一个画布，通过他，我们可以在上面绘制各种不同的图形，是html5中的一个强大的功能，现在我们就来时认识一下这个孩子，直接看看代码吧！~

—————————————————————————————

<!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>

var c=document.getElementById(“myCanvas”);//获得id为myCanvas的对象 var cxt=c.getContext(“2d”);//getContext(“2d”) 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法 cxt.fillStyle=”#ff8800″;//设置填充的颜色 cxt.fillRect(10,60,100,40);//填充一个正方形 cxt.moveTo(10,10);//把画笔移动某一点 cxt.lineTo(150,50);//画直线，从上面的那个点到移动到的位置 cxt.lineTo(10,50);//画直线，从上面的那个点到移动到的位置 cxt.stroke();

</script>

</body> < /html>