前面我们提到了JS代码中绘制的红色长方形,那么我们现在用这些代码再来看看具体是表示什么意思。代码如下

<script type="text/javascript">
var Canvas=document.getElementById("myCanvas"); 
varContext=c.getContext("2d");

Context.fillStyle="#FF0000";

Context.fillRect(0,0,150,75);
 </script>

其实理解能力稍微强一点的小伙伴都应该看出来了,在第一行呢是获取canvas对象,而第二行中呢getContext("2d") 对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。很显然我们这里用到的是最原始的2D方法。第三行是给到绘制图形的填充颜色,格式与一般的CSS样式没有区别。而第四行则是图形的内部参数,4个参数我们用(a,b,c,d)分别来表示。其中a,b表示绘制始点坐标,也就是本例中长方形左上角的坐标,而c,d呢自然而然的也就是长方形的长宽了。具体的一些东西能请查询W3C的手册,谢谢。
posted on 2015-07-12 23:49  andy想要简单点  阅读(384)  评论(0编辑  收藏  举报