Canvas入门03-绘制弧线和圆

绘制弧线的API:

context.arc(centerx:number, centery: number, radius: number, startAngle: number, endAngle: number, anticlockwise?: boolean)

参数说明：

centerX 圆心坐标x
centerY 圆心坐标y
radius 圆半径
startAngle 起始弧度
endAngle 结束弧度
anticlockwise 是否逆时针绘制，默认false，也就是顺时针绘制

对于一个圆来说，0弧度是从水平方向右侧开始的。

var canvas = document.getElementById('canvas');canvas.width = 1024;canvas.height = 768;if (canvas.getContext('2d')) {var context = canvas.getContext('2d');console.log(context); // CanvasRenderingContext2D// context.arc(300, 300, 200, 0, 1.5 * Math.PI);// context.arc(300, 300, 200, 0, 1.5 * Math.PI, true);// context.arc(300, 300, 200, 0, 0.5 * Math.PI, true);
context.lineWidth = 3;context.strokeStyle = '#005588';context.fillStyle = '#005577';for (var i = 0; i < 10; i++) {context.beginPath();context.arc(50 + i * 100, 60, 40, 0, 2 * Math.PI*(i+1)/10);// context.closePath(); // 路径会被自动封闭
                context.stroke();// context.fill();
            }} else {alert('当前浏览器不支持Canvas，请更换浏览器后再试');}

效果：

注意：

如果加上了context.closePath() 所绘制的弧会自动封闭。

转载于:https://www.cnblogs.com/liulei-cherry/p/9875166.html

Canvas入门03-绘制弧线和圆相关推荐

canvas之三：绘制弧和圆
在画完直线和三角形之后,接下来我们要画一段弧和一个圆,先看下效果图: 源代码: <!DOCTYPE html> <html> <head lang="en&qu ...
html绘制圆形和弧形的代码,通过HTML5 Canvas API绘制弧线和圆形的教程
在html5中,CanvasRenderingContext2D对象也提供了专门用于绘制圆形或弧线的方法,请参考以下属性和方法介绍: JavaScript Code复制内容到剪贴板 arc(x, y, ...
Canvas学习：绘制圆和圆弧
圆和圆弧是图形中基本图形之一,今天我们来了解在Canvas中怎么绘制圆和圆弧.在Canvas中绘制圆和圆弧其实和绘制线段和矩形一样的简单.在Canvas中,CanvasRenderingContext ...
Canvas入门－利用Canvas绘制好玩的电子时钟
在这之前你需要了解一下方法的使用: beginPath() closePath() moveTo() lineTo() fill() stroke() fillRect() clearRect() ...
学习Canvas基础-绘制弧线和曲线
绘制曲线和弧线的方法 ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise) 用于绘制圆或部分圆. 参数: x-圆弧中心(圆心)的 x 轴 ...
html五绘制弧线的方法是,使用HTML5 Canvas API绘制弧线的教程
绘制标准圆弧在开始之前,我们优化一下我们的作图环境.灵感来自于上节课的纹理,如果不喜欢这个背景,我在images目录下还提供了其他的背景图,供大家选择.另外把所有的样式表都写在了下.JavaScr ...
html5拓扑图图入门,如何使用HTML5 Canvas动态的绘制拓扑图
如何使用HTML5 Canvas动态的绘制拓扑图使用HTML5 Canvas动态的绘制拓扑图: HTML5中引入新的元素canvas,其drawImage 方法允许在 canvas 中插入其他图像( ...
html5 canvas实际应用,Html5 Canvas入门及经典应用
Html5 Canvas入门及经典应用时间:2019-02-15 来源:华清远见 canvas想必对于前端的工程师都不陌生了,它是 HTML5 新增的「画布」元素,是HTML5 的一大亮点, ...
最【通俗易懂】的 canvas 入门教程（多图预警）
最[通俗易懂]的 canvas 入门教程(多图预警) canvas画布的宽度与高度 canvas 标签只有两个常用的标签属性:width 和 height. 当没有设置宽度和高度的时候,canvas ...

Canvas入门03-绘制弧线和圆

Canvas入门03-绘制弧线和圆相关推荐

最新文章

热门文章