html5的canvas简单使用

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>

<script type=”text/javascript”>

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>

共有 0 条评论

Top