HTML5 canvas 实例

用THML5 canvas 画了一个表示幻灯片的icon(100px * 78px)@speakerdeck.com

这个icon的绘制首先要选中canvas元素,然后设定它的绘制环境,此时是在向量图环境下 //cont=canv.getContext ('2d'),接下来就要绘制路径,用到的方法可以参考vectors vs bitmaps 。对于arc()需要再仔细看一下。

语法:arc(圆心横坐标,圆心纵坐标,半径,圆弧起始弧度,圆弧终止弧度,是否逆时针方向)                         代码:cont.arc(x,y,radius,startAngle,stopAngle,counterclockwise)                                                   不知道别人是不是也一样,反正我一开始对于这个起始弧度和终止弧度很不明白,每次都要根据画出来的图看看弧度是不是写对了。后来在网上看到了这个图。                                                                  

canvas以其元素的左上角顶点为原点,向右为横坐标正方向,向下为纵坐标正方向(viewport 和 document也一样)。上图的PI值就是在这样一个坐标下确定的,和我们学过的坐标是一样的。有了四个方向上的PI值就可以按照顺时针或是逆时针方向很容易的选择角度了。

具体实现的程序如下:                                                                                                              

心得:
  • 用canvas画图深切让我重温了大学里用autoCAD画图的经历,最麻烦的事就是确定学要的点的坐标,遇到sin cos时很麻烦。
  • 还有一点要注意!canvas的默认大小是300px * 150px,有时候我们不需要那么大,或是需要更大。这时候可以设置canvas的width值和height值,这里设置的方法并不是像第一块代码的注释那样对css样式进行修改,而是:                                                      

    canv.setAttribute("width","300");
    canv.setAttribute("height","300");
    或是
    canv.width = "300";
    canv.height = "300";

    这修改的只是canvas能够渲染的面积,并不会对绘制的图进行缩放,而上面代码中的注释:canv.style.width=“300px";
    canv.style.height=”300px“;
    (或者直接在css中改)则会对图进行缩放,它会根据canvas的默认值300px * 150px按比例进行缩放,现在x轴方向没变,y轴方向加倍了。如下图:

comments powered by Disqus