由于这两年HTML5火的正热,所以研究了一下,最近有个想法也是要用到HTML的相关功能,所以也要好好学习一把。
好好看了一下Canvas的功能,感觉HTML5在客户端交互的功能性越来越强了,今天看了一下Canvas绘图,下边是几个实例,记下以备后用。
1、使用Canvas绘制直线:
<Meta charset="UTF-8">
这里使用了一个方法——fillRect()从字面意思也能知道这个就是填充一个矩形,这里的参数值得说明一下fillRect(X,Y,Width,Height),这个和数学里的坐标是不一样的,具体请看
这里的X,Y是相对Canvas左上角的起点开始的,谨记!!
4、绘制一个简单的矩形框
上例中讲到要绘制一个矩形块,填充了颜色,这个例子只是简单地绘制一个矩形而不实现填充效果。
<Meta charset="UTF-8">
这里的arc方法的用法是 arc(X,Radius,startAngle,endAngle,anticlockwise),意思是(圆心X坐标,圆心Y坐标,半径,开始角度(弧度),结束角度弧度,是否按照顺时针画);
arc中各参数比较:
a、cans.arc(200,Math.PI,true);
c、cans.arc(200,Math.PI/2,true);[/code]
c、cans.arc(200,true);
d、cans.arc(200,false);
7、圆形区块
<Meta charset="UTF-8">