使用canvas绘制等分圆

代码如下 :

<body>
<canvas width="600" height="500" id="cvs"></canvas>
</body>

 var canvas = document.querySelector('#cvs');canvas.style.border = '1px solid blue';var cvs = canvas.getContext('2d');//圆弧的份数var num = 6;//一个圆弧对应的弧度var angle = Math.PI * 2 / num;var canvasW = canvas.width;var canvasH = canvas.height;//随机颜色var getRandomColor = function () {var r = parseInt(Math.random() * 256);var g = parseInt(Math.random() * 256);var b = parseInt(Math.random() * 256);return 'rgb(' + r + ',' + g + ',' + g + ')';}var star = 0;var end = angle;for (var i = 0; i < num; i++) {cvs.beginPath();cvs.moveTo(canvasW / 2, canvasH / 2);cvs.arc(canvasW / 2, canvasH / 2, 100, star, end);cvs.closePath();cvs.fillStyle = getRandomColor();cvs.fill();star = end;end = end + angle;}

使用canvas绘制等分圆相关推荐

canvas绘制四分之一圆_canvas中怎么绘制一个扇形?四分之一圆.
2016-01-13 回答在html5 canvas 中,我们可以通过 arc 方法来绘制圆形: // context.arc(x, y, r, sangle, eangle, counterclo ...
如何在html5中实现多圆,JavaScript与html5如何实现canvas绘制圆形图案的方法介绍
这篇文章主要介绍了js+html5实现canvas绘制圆形图案的方法,涉及html5图形绘制的基础技巧,需要的朋友可以参考下本文实例讲述了js+html5实现canvas绘制圆形图案的方法.分享给大 ...
php绘制空心圆,HTML_html5使用canvas画空心圆与实心圆，这里给大家分享的是一个学习c - phpStudy...
html5使用canvas画空心圆与实心圆这里给大家分享的是一个学习canvas的时候做的画空心圆与实心圆的练习题,非常简单. 复制代码代码如下: var canvas=document.getEl ...
史上最详细的使用canvas绘制五星红旗的方法
史上最详细的使用canvas绘制五角星的方法昨天我们在课堂上讲到了HTML5中的canvas标签,canvas标签用于绘制图像(通过脚本,通常是 JavaScript).当天布置的作业就是利用can ...
canvas绘制时钟
听了慕课网Sliav Zhou 的课程canvas绘制时钟,记录下来的代码,每句做了注解便于以后学习,原先每次边听别的课边敲码,错误百出,明明原封不动复制的代码,就会出错,还找不到原因,今天可能运气好 ...
使用canvas绘制圆形进度条
实现步骤: 绘制一个圆: 绘制圆环: 绘制进度环: 绘制文字: 一.创建画布 <canvas id='myCanvas' width='200' height='200'></can ...
canvas绘制圆形
canvas绘制圆形的思路: 1.创建路径 XXX.beginpath(); 2.创建圆形的路径: 3.关闭路径:XXX.closepath(); 路径不关闭也能绘制出图形 4.设定绘制样式. 创建圆 ...
android 自定义多边形,Android:自定义view之Canvas绘制图形
前面讲解了onMeasure,接下来讲解onDraw,onDraw主要就是绘制,也就是我们真正关心的部分,使用的是Canvas绘图. @Override protected void onDraw(C ...
html 怎么在画布上绘制一个圆,javascript – 如何在画布上画一个圆圈？
我使用 javascript和画布绘制一个数学设计的尺度(用于测量扭矩,包括牛顿米和英尺磅).我已经用三角法来定位我的刻度,自然地用弧线绘制电弧线.问题来了,当他们需要排队,但有一些奇怪的失真.然后我 ...
canvas绘制经典折线图(一)
最终效果图如下: 实现步骤如下:注-引用了jQuery HTML代码 <!doctype html> <html lang="en"> <head&g ...

使用canvas绘制等分圆

使用canvas绘制等分圆相关推荐

最新文章

热门文章