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标签中添加<mate charset='utf8'>就行了。

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

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 下面我们就来看一下使用canvas如何绘制除矩形以为的其他图形,要想绘制其他图形,需要使用路径,同样在绘制之前,先...
    博为峰51Code教研组阅读 4,353评论 0 0
  • 一:canvas简介 1.1什么是canvas? ①:canvas是HTML5提供的一种新标签 ②:HTML5 ...
    GreenHand1阅读 10,212评论 2 32
  • 一、canvas简介 1.1 什么是canvas?(了解) 是HTML5提供的一种新标签 Canvas是一个矩形区...
    Looog阅读 9,375评论 3 40
  • 一、canvas简介 1.1 什么是canvas?(了解) 是HTML5提供的一种新标签 Canvas是一个矩形区...
    J_L_L阅读 5,489评论 0 4
  • 你应该什么样? 前几日在微博看到一个转发,提问者:如果人生可以选择(或者说选择一个平行世界里你满意的自己),你希望...
    茶酒TEAWINE阅读 1,549评论 0 0

友情链接更多精彩内容