html5绘制圆形,Canvas绘制圆形

使用canvas绘制圆形步骤:

1、在页面中创建canvas的节点(相当于创建一个画板)，设置CSS样式。(注意：要在行内样式中设置canvas的宽高。)

2、在JS中获取节点，并获取画板(绘画环境)、设置画笔颜色。

var canvas=document.getElementById('canvas');

var cv=canvas.context('2d');

cv.fillStyle='red';

3、绘制圆形。使用arc(x，y，r，开始弧度1，开始弧度2)方法。

前三个好理解就是圆心坐标，半径。

后面两个分别是开始的弧度和结束的弧度。弧度计算公式：角度*Math.PI/180;

cv.arc(300,200,100,0*Math.PI/180,80*Math.PI/180);//从300.200坐标中延伸出一条100像素的线，以300.200为中心做条X,Y轴。并以角度0-80绘画。

4、填充，或者画线。

cv.fill();//填充，或者cv.stroke()画线。

补充：

上面的步骤，可以绘制圆形，半圆，圆弧。绘制不了饼状的图片(类似下面的图片)。需要先声明并添加起点。cv.beginPath();cv.moveTo(x,y);

出现的问题：

当前编辑器：HBuilder.

1、在进入工程时，出现缺少描述文件的东西，导致工程打不开。

缺少描述文件

解决办法：把该文件夹中所有文件全部复制到新的文件夹中，然后在导入进工程。

2、在编辑时，所有的中文字样全部变成乱码。

解决办法：在head标签中添加就行了。

3、在绘画结束后，页面当中并没有出现圆弧。

解决办法：分析实验后发现，是由于画板的宽高是在css中设置，导致圆弧发生了偏移，并且变形。把其改变成行内样式来设置就可以了。