html5圆圈图⽚代码,HTML5canvas如何绘制圆形？（代码实
例）
canvas能⽤于绘制各种图形，那么如何使⽤HTML5 canvas绘制⼀个圆形呢？本篇⽂章就来给⼤家介绍关于HTML5 canvas绘制圆形的⽅法，下⾯我们来看具体的内容。
我们来直接看⽰例
代码如下
function draw() {
html图片展示特效
var canvas = ElementById('SimpleCanvas');
if ( ! canvas || ! Context ) {
return false;
}
var cx = 360;
var cy = 400;
var radius = 36;
var context = Context('2d');
context.beginPath();
context.arc(cx, cy, radius, 0, 2 * Math.PI, false);
context.fillStyle = '#9fd9ef';
context.fill();
context.lineWidth = 1;
context.strokeStyle = '#00477d';
context.stroke();
}
Canvas Demo
运⾏结果
浏览器上执⾏上述HTML⽂件。将会显⽰如下效果
最后说明⼀点
arc()⽅法给出的圆的坐标是圆的中⼼坐标。
在上述的HTML代码中，将绘图部分设为下⾯的代码。function draw() { var canvas = ElementById('SimpleCanvas');
if ( ! canvas || ! Context ) {
return false;
}
var cx = 360;
var cy = 400;
var radius = 36;
var context = Context('2d');
context.beginPath();
context.arc(cx, cy, radius, 0, 2 * Math.PI, false);
context.fillStyle = '#9fd9ef';
context.fill();
context.lineWidth = 1;
context.strokeStyle = '#00477d';
context.stroke();
context.beginPath();
context.lineTo(cx, cy);
context.stroke();
}
上述代码的显⽰效果如下，可以看到中⼼坐标是圆的中⼼。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。