HTML5高阶实例之canvas绘制圆弧

最新推荐文章于 2023-02-28 20:06:19 发布
最新推荐文章于 2023-02-28 20:06:19 发布
阅读量573 收藏 3
点赞数
分类专栏： web前端开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wanshaobo888/article/details/95895959
版权
最新更新时间：2019年07月14日14:18:12
《猛戳-查看我的博客地图-总有你意想不到的惊喜》

本文内容：canvas 绘制圆弧

绘制任意角度的纯色圆弧

模板骨架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas demo</title>
    <script type="text/javascript">
      function draw(){
        var canvas = document.getElementById('myCanvas');//返回DOM对象
        if (canvas.getContext){
          var ctx = canvas.getContext('2d');//返回canvas 的上下文
        }
      }
    </script>
</head>
<body onload="draw();">
	<canvas id="myCanvas" width="300" height="300"></canvas>
</body>
<scritp></script>
</html>

初始化并绘制30°圆弧

function initCanvas(){
	let canvas = document.getElementById("myCanvas")
    this.ctx = canvas.getContext("2d");
    let width = 140,height = 140;
    canvas.width = width;//等同于写在组件 width={canvaswidth}
    canvas.height = height;//等同于写在组件 height={canvasheight}
    //移动端毛边优化和模糊优化-借鉴于echarts
	if (window.devicePixelRatio) {
		canvas.style.width = width + "px";
		canvas.style.height = height + "px";
		canvas.height = height * window.devicePixelRatio;
		canvas.width = width * window.devicePixelRatio;
		this.ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
	}
	//创建背景圆
	this.ctx.lineWidth = 12;//线宽
	this.ctx.lineCap = 'round';//圆弧顶端弧面
	this.ctx.beginPath();//开始一个新的路径 x*(36/180)*Math.PI
    this.ctx.arc(70, 70, 60, -Math.PI/2, Math.PI/6 - Math.PI/2, false);//绘制30°圆弧context.arc(圆心的x坐标，圆心的y坐标，半径，起始角度，终止角度，false顺时针/true逆时针)
    this.ctx.strokeStyle = 'rgba(252,255,152, 1)';
    this.ctx.stroke();//对当前路径进行描边
}

几点说明：

  • lineCap 线段末端的属性，butt-线段末端以方形结束，round-线段末端以圆形结束，square-线段末端以方形结束，但是增加了一个宽度和线段相同，高度是线段厚度一半的矩形区域。
  • arc 绘制圆弧路径的方法，起始角度-Math.PI/2为十二点钟(零点)方向

在这里插入图片描述

绘制任意角度的渐变色圆弧

初始化并绘制270°圆弧

function initCanvas(){
	let canvas = document.getElementById("myCanvas")
    this.ctx = canvas.getContext("2d");
    let width = 140,height = 140;
    canvas.width = width;//等同于写在组件 width={canvaswidth}
    canvas.height = height;//等同于写在组件 height={canvasheight}
    //移动端毛边优化和模糊优化-借鉴于echarts
	if (window.devicePixelRatio) {
		canvas.style.width = width + "px";
		canvas.style.height = height + "px";
		canvas.height = height * window.devicePixelRatio;
		canvas.width = width * window.devicePixelRatio;
		this.ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
	}
	//创建背景圆
	this.ctx.lineWidth = 12;//线宽
	this.ctx.lineCap = 'butt';
	let g = this.ctx.createLinearGradient(30*Math.sqrt(2), 0, 0, 30*Math.sqrt(2));
    g.addColorStop(0, 'rgba(252,255,152, 1)');
    g.addColorStop(1, 'rgba(252,0,0, 1)');
    this.ctx.strokeStyle = g;
	this.ctx.beginPath();//开始一个新的路径 x*(36/180)*Math.PI
    this.ctx.arc(70, 70, 60, -Math.PI/2, Math.PI*3/2 - Math.PI/2, false);
    this.ctx.stroke();//对当前路径进行描边
}

半径为60°的圆弧，渐变色x轴和y轴的起点和终点的值如下表：

坐标点名称30°90°180°270°360°
渐变色x起点--30*Math.sqrt(2)30*Math.sqrt(2)-
渐变色y起点--00-
渐变色x终点--00-
渐变色y终点--30*Math.sqrt(2)*230*Math.sqrt(2)-
圆弧路径起始坐标--–Math.PI/2-Math.PI/2-
圆弧路径终点坐标--Math.PI - Math.PI/2Math.PI*3/2 - Math.PI/2-

在这里插入图片描述

绘制360°双色圆弧
function initCanvas(){
	let canvas = document.getElementById("myCanvas")
    this.ctx = canvas.getContext("2d");
    let width = 140,height = 140;
    canvas.width = width;//等同于写在组件 width={canvaswidth}
    canvas.height = height;//等同于写在组件 height={canvasheight}
    //移动端毛边优化和模糊优化-借鉴于echarts
	if (window.devicePixelRatio) {
		canvas.style.width = width + "px";
		canvas.style.height = height + "px";
		canvas.height = height * window.devicePixelRatio;
		canvas.width = width * window.devicePixelRatio;
		this.ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
	}
	//创建背景圆
	this.ctx.lineWidth = 12;//线宽
	this.ctx.lineCap = 'butt';
	
	this.ctx.strokeStyle = 'rgba(252,255,152, 1)';
    this.ctx.beginPath();
    this.ctx.arc(70, 70, 60, -Math.PI/2, Math.PI - Math.PI/2, false);
    this.ctx.stroke();

    this.ctx.strokeStyle = 'rgba(255,105,180, 1)';
    this.ctx.beginPath();
    this.ctx.arc(70, 70, 60, Math.PI/2, Math.PI*2 - Math.PI/2, false);
    this.ctx.stroke();
}

在这里插入图片描述

绘制360°三色圆弧
function initCanvas(){
	let canvas = document.getElementById("myCanvas")
    this.ctx = canvas.getContext("2d");
    let width = 140,height = 140;
    canvas.width = width;//等同于写在组件 width={canvaswidth}
    canvas.height = height;//等同于写在组件 height={canvasheight}
    //移动端毛边优化和模糊优化-借鉴于echarts
	if (window.devicePixelRatio) {
		canvas.style.width = width + "px";
		canvas.style.height = height + "px";
		canvas.height = height * window.devicePixelRatio;
		canvas.width = width * window.devicePixelRatio;
		this.ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
	}
	//创建背景圆
	this.ctx.lineWidth = 12;//线宽
	this.ctx.lineCap = 'butt';
	
	this.ctx.strokeStyle = 'rgba(252,255,152, 1)';
    this.ctx.beginPath();
    this.ctx.arc(70, 70, 60, -Math.PI/2, Math.PI*2/3 - Math.PI/2, false);
    this.ctx.stroke();

    this.ctx.strokeStyle = 'rgba(255,105,180, 1)';
    this.ctx.beginPath();
    this.ctx.arc(70, 70, 60, -Math.PI/2 + Math.PI*2/3, Math.PI*4/3 - Math.PI/2, false);
    this.ctx.stroke();

    this.ctx.strokeStyle = 'rgba(0,255,0, 1)';
    this.ctx.beginPath();
    this.ctx.arc(70, 70, 60, Math.PI*4/3 - Math.PI/2, Math.PI*2 - Math.PI/2, false);
    this.ctx.stroke();
}

在这里插入图片描述

以动画形式绘制圆弧
function initCanvas(){
	let canvas = document.getElementById("myCanvas")
    this.ctx = canvas.getContext("2d");
    let width = 140,height = 140;
    canvas.width = width;//等同于写在组件 width={canvaswidth}
    canvas.height = height;//等同于写在组件 height={canvasheight}
    //移动端毛边优化和模糊优化-借鉴于echarts
	if (window.devicePixelRatio) {
		canvas.style.width = width + "px";
		canvas.style.height = height + "px";
		canvas.height = height * window.devicePixelRatio;
		canvas.width = width * window.devicePixelRatio;
		this.ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
	}
	//创建背景圆
	this.ctx.lineWidth = 12;//线宽
	this.ctx.lineCap = 'round';//圆弧顶端弧面
	startAnimate();
}
function startAnimate(){
    let _this = this;
    let totalScore = 90;//以满分为100分表示圆弧为360°
    let count = 0;
    this.scoreCountTimer = setInterval(function(){
      count += 1;
      if(count >= totalScore){
        count = totalScore
      }
      //清空canvas内上一次的绘制图案
      _this.ctx.clearRect(0, 0, 140, 140);//左上角为 00坐标 x y w h
      //绘制新圆弧
      _this.ctx.beginPath();//开始一个新的路径 x*(36/180)*Math.PI
      _this.ctx.arc(70, 70, 60, -Math.PI/2, (count*Math.PI*2/100) - Math.PI/2, false);///用于绘制圆弧context.arc(x坐标，y坐标，半径，起始角度，终止角度，false顺时针/true逆时针)
      _this.ctx.strokeStyle = 'rgba(252,255,152, 1)';
      _this.ctx.stroke();//对当前路径进行描边
      //分数动态渲染，canvas重绘不需要执行setState方法
      _this.setState({score: count})
      if(count >= totalScore){
        clearInterval(_this.scoreCountTimer)
      }
    },15)
  }

在这里插入图片描述

canvas api详解

HTMLCanvasElement.getContext() 方法返回canvas 的上下文，CanvasRenderingContext2D 具有的属性和方法如下：

  • 属性：canvas、currentTransform、direction、fillStyle、filter、font、globalAlpha、globalCompositeOperation、imageSmoothingEnabled、imageSmoothingQuality、lineCap、lineDashOffset、lineJoin、lineWidth、miterLimitshadowBlur、shadowColor、shadowOffsetX、shadowOffsetY、strokeStyle、textAlign、textBaseline
  • 方法：addHitRegion()、arc()、arcTo()、beginPath()、bezierCurveTo()、clearHitRegions()、clearRect()、clip()、closePath()、createImageData()、createLinearGradient()、createPattern()、createRadialGradient()、drawFocusIfNeeded()、drawImage()、drawWidgetAsOnScreen()、drawWindow()、ellipse()、fill()、fillRect()、fillText()、getImageData()、getLineDash()、isPointInPath()、isPointInStroke()、lineTo()、measureText()、moveTo()、putImageData()、quadraticCurveTo()、rect()、removeHitRegion()、resetTransform()、restore()、rotate()、save()、scale()、scrollPathIntoView()、setLineDash()、setTransform()、stroke()、strokeRect()、strokeText()、transform()、translate()
var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');

常用的：

  • ctx.clearRect();//设置指定矩形区域内所有像素变成透明，并擦除之前绘制的所有内容
  • ctx.fillRect();//绘制填充矩形
  • ctx.strokeRect();//使用当前的绘画样式
  • ctx.lineCap;//线末端的类型
  • ctx.fillStyle;//图形内部的颜色和样式。 默认 #000 (黑色).
  • ctx.strokeStyle;//图形边线的颜色和样式。 默认 #000 (黑色).
  • ctx.beginPath();//清空子路径列表开始一个新的路径
  • ctx.arc();//绘制一段圆弧路径
  • ctx.stroke();//使用当前的样式描边子路径
  • ctx.drawImage();//绘制指定的图片
  • ctx.getImageData();//返回一个 ImageData 对象
参考资料

感谢阅读，欢迎评论^-^

打赏我吧^-^

万少博
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML5 Canvas中 绘制圆弧
KXJ
04-07 473
本文链接：https://blog.csdn.net/ixygj197875/article/details/80043646 绘制圆弧 圆弧被定义为假想的圆周上任意两点之间的部分。Canvas的API提供了两个绘制圆弧的方法：arc()和arcTo()方法。 arc()方法 使用arc()方法绘制圆弧时，假想的圆由圆心和半径来定义，两个点由起始角度和结束角度来定义，还需要一个参数来定义绘制方向。...
html5制作圆弧,1.2 绘制圆弧 - HTML5 Canvas 实战
weixin_34791250的博客
06-17 1322
使用HTML5画布时，有时候需要绘制完美的圆弧。如果你对绘制彩虹、笑脸、图表等感兴趣，本节将是你努力的起点。图1-3 绘制圆弧绘制步骤按照以下步骤绘制一条圆弧：1. 定义2D画布并设置圆弧样式：window.onload = function(){var canvas = document.getElementById("myCanvas");var context = canvas.ge...
html5 canvas元素各种圆弧绘制
蛮牛呆呆的博客
12-16 2018
canvas{background: #b8edc9;}                            Canvas                      您的浏览器不支持html5dcanvas元素                       var canvas=document.getElementById('mycanvas');//定义变量获取画布dom
使用canvas绘制一个圆或者圆弧
yinge0508的博客
09-23 977
arc(x, y, radius, startAngle, endAngle, anticlockwise) 画一个以（x,y）为圆心的以radius为半径的圆弧（圆），从startAngle开始到endAngle结束，按照anticlockwise给定的方向（默认为顺时针）来生成。 arc()函数中表示角的单位是弧度，不是角度。角度与弧度的js表达式: 弧度=(Math.PI/180)*角度。 参数anticlockwise为一个布尔值。为true时，是逆时针方向，否则顺时针方向。 代码如下： .
JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例
10-22
主要介绍了JavaScript+html5 canvas绘制的圆弧荡秋千效果,以完整实例形式分析了JavaScript集合html5的canvas绘制图形的相关技巧,需要的朋友可以参考下
HTML5 Canvas绘制圆点虚线实例
09-28
主要介绍了HTML5 Canvas绘制圆点虚线实例,HTML5并未提供画虚线的方法,本文是根据Stack Overflow的方法修改而来,需要的朋友可以参考下
JavaScript+html5 canvas绘制渐变区域完整实例
10-22
主要介绍了JavaScript+html5 canvas绘制渐变区域的方法,结合完整实例形式分析了canvas颜色调用与图形绘制的相关技巧,需要的朋友可以参考下
html5 Canvas绘制线条 closePath()实例代码
09-28
html5 Canvas绘制线条 closePath()实例代码，需要的朋友可以参考下
Canvas画圆弧
pengyu1801的专栏
10-30 686
public void drawArc(RectF oval, float startAngle, float sweepAngle, boolean useCenter, Paint paint)1.oval :指定圆弧的外轮廓矩形区域。 2.startAngle: 圆弧起始角度，单位为度。 3.sweepAngle: 圆弧扫过的角度，顺时针方向，单位为度。 4.useCenter: 如果为
CANVAS绘制圆弧
sunyiban的专栏
08-03 450
绘制矩形圆角： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 <!DOCTYPE
用canvas画弧形进度条
weixin_30437337的博客
11-23 253
function toCanvas(id ,progress){ //canvas进度条 var canvas = document.getElementById(id), ctx = canvas.getContext("2d"), percent = progress, //最终百分比 circleX = canvas.width / 2, //中心x坐标...
Html5系列（十九） canvas 弧形描边渐变
绿茵场的激情
04-16 3141
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> html xmlns="http://www.w3.org/1999/xhtml"> head> meta http-equiv="Content-Type"
Canvas绘制简单路径、弧、圆形、饼状图
coding
04-22 811
Canva绘制图形还是很方便的，用来制作动画，效果是很不错的，下面简单介绍一些绘制图形的方式 图形的基本元素是路径： 路径是通过不同颜色和粗细的线段或曲线相连形成的不同形状的点的集合 2D 绘制上下文支持很多在画布上绘制路径的方法，通过路径可以创造出复杂的形状和线条，要绘制路径，首先必须调用 beginPath() 方法，表示要开始绘制新路径。 一、路径绘制图形 开始绘制新路径beginP...
H5画布 canvas（一）canvas简介、绘制圆形/矩形、案例饼状图绘制
热门推荐
商务合作 | 共同学习 | 携手共进
02-18 10万+
canvas 简介、canvas 绘图基础(标签介绍、上下文context、beginPath 状态)、案例：绘制表格、绘制饼状图。
html5 Canvas drawing (一)
weixin_30417487的博客
01-12 254
html5 canvas 介绍 html5 canvas 基本属性 只有对基础二维图形的绘画（drawing）、着色(coloring)、变换（transforming）有较强基础，才能更加有效的利用Canvas； 下面，我就简单了解一下，canvas是如何绘画基本shape的（矩形、直线、圆弧、贝赛尔曲线）等； 先贴一个以下所有涉及到的实现运行的基本代码段： Base co...
Canvas弧形进度条
qq_40289557的博客
06-11 920
在可视化应用中，弧形进度条应用也比较广泛，在“SVG绘制圆环进度条”和“线形进度条的几种实现方式”这两章之后，今天针对平时开发中关于弧形进度条的实现方案进行一个总结，结合Javascript面向对象的开发方式，参考echarts的实现方式，封装一个可复用、个性化的弧形进度条组件.........
uniapp canvas绘制弧形圆环
技术不够，加班来凑
04-21 4521
项目uniapp 绘制弧形圆环 首先说下：uniapp 插件市场有一个弧形进度条，作为组件引用的话是不兼容小程序，所以我做的是直接在本页面中进行绘制，刚开始也是作为组件进行引入的，但是小程序不兼容，无法展示，所以就抛弃掉官网的组件了，之前写过一个h5的vue绘制圆环，就改了改，改成都能兼容的了，具体弧度不会算的可以看我的另一篇文章 UI效果 先确定效果图展示效果 可以看出两个圆环，一个背景圆环，一个进度圆环，所以要声明两个canvas层 我的图层是130*130的，uniapp的适配rpx，所以ce
canvas复习笔记（绘制直线、矩形、圆形、圆弧）
YanHSama的博客
02-28 850
线的中心点会和画布像素点的底部对齐，所以会线中间是黑色的，但由于一个像素就不能再切割了，所以会有半个像素被染色，就变成了浅灰色。发现上面设置样式，两条直线颜色都是同时修改的，如果需要每条直线设置不同的样式，需要使用新开路径，避免污染。在实际开发中，为了让自己或者别的开发者更容易看懂弧度的数值，1°应该写成 Math.PI / 180。counterclockwise，true为顺时针方向， false为逆时针方向，默认为false。bevel: 斜面;就会发现第一条直线时默认的颜色，第二条样式有更改。
canvas绘制圆弧
最新发布
07-28
要在Canvas中绘制圆弧，可以使用`arc()`方法。该方法接受六个参数：圆心的x坐标、圆心的y坐标、半径、起始角度、结束角度和绘制方向（默认为顺时针）。 下面是一个示例代码，演示如何在Canvas上绘制一个圆弧： ```...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值