JavaScript实现使用Canvas绘制图形的基本教程

前端之家收集整理的这篇文章主要介绍了JavaScript实现使用Canvas绘制图形的基本教程前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

由于这两年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">

猜你在找的JavaScript相关文章