使用canvas绘制圆弧动画

2019-01-12 admin

效果预览

图片描述

canvas 绘制基本流程

图片描述

初始画布

对于canvas的绘制,首先需要在html内指定一块画布,即**<canvas></canvas>**, 可以看做是在PS中新建一个空白文档,之后所有的操作都将呈现在这个文档之上,与PS的区别是,canvas本身没有图层的特性,当需要展示不同维度的视图时,需要交由html的位置关系来解决。

canvas标签上,值得一提的就是width和height两个属性,这两个属性代表着画布的宽高,与canvas样式上的宽高有很大区别。在浏览器当中,看到的图形绘制大小,本身是由canvas.style.width/canvas.style.height决定的,他们决定了canvas这个dom元素的大小关系,而canvas.width和canvas.height决定的是canvas内部图形的大小关系。当这两个宽高比不同时,就会产生视觉上的形变。即,把canvas.style.height放大为2倍时,显示效果会被拉伸: 图片描述

当不设置样式宽高时,浏览器中canvas大小由画布大小决定(在实际开发中,碰到一个例外,是在使用mapbox时,绘制map的标签如果只设置canvas画布大小时,在ios移动端的浏览器上显示异常,PC正常)。

获取上下文

所谓上下文,代表的就是一个环境,在这个环境当中你可以获取到相关的方法,变量。程序中有上下文,html的媒体中也有上下文,比如音频上下文(AudioContext),只有拿到了上下文,才能进行相关的方法操作,canvas也是如此,canvas上的方法都是借由canvas上下文得到。

<canvas id="leftCanvas"></canvas>
const canvasL = document.getElementById("leftCanvas");
const cxtL = canvasL.getContext("2d");

配置线条

本次圆弧动画需要用到的上下文属性有:

  • lineCap 线段端点形状,本次设置为round
  • lineWidth 线宽
  • strokeStyle 线条填充颜色
  • clearRect 清除画布里面的内容
  • beginPath 在画布上开始一段新的路径
  • arc 圆弧绘制参数配置
  • stroke 绘制

角度计算

角度计算之前,先介绍一下绘制圆弧的基础api arc

ctx.arc(x, y, radius, startAngle, endAngle [, anticlockwise]);

这个函数可以接收6个参数,前五个为必填,分别为圆心x坐标,圆心y坐标,半径,起始角度,结束角度,方向(默认为false,顺时针)。

回到圆弧动画,当前动画有两段,以顺时针方向这段为例。

  • x, y:在canvas当中,坐标系默认以左上角为原点,如果想让圆弧动画以画布中心点旋转,可以将圆心点设置为画布中心点,即画布长宽的1/2,假设设置的画布长宽均为100,那么圆心点的坐标即为(50, 50),这个圆就绘制在了画布中间。
  • radius:为了不与画布产生切角,半径设置比画布一般略小,。
  • startAngle:起始角度为正北方向,而圆以x轴水平方向为0度,因此将起始点逆时针旋转90°,即:-1 / 2 * Math.PI。
  • endAngle:因为圆弧长度为30°,终点角度在起始角度的基础上增加 1 / 6 * Math.PI。

顺时针方向圆弧初始配置为:

 cxtL.arc(WidthL / 2, HeightL / 2, WidthL / 2 - 5, -1 / 2 * Math.PI, 1 / 6 * Math.PI, false);

开启动画

window.requestAnimationFrame()

借助requestAnimationFrame,来对canvas圆弧进行不断的重绘,每次重绘canvas之前清空画布,每轮动画方向角偏移2°,即2 / 180 * Math.PI,动画结束的标记为圆弧终点的角度,移动至3 / 2 * Math.PI,当满足条件时,调用window.cancelAnimationFrame(animationId)取消动画。

屏幕适配

通过进入html后,动态获取视口,来设置canvas宽高,比如希望画布大小为窗口的宽度的15%,可以通过

const clientWidth = document.documentElement.clientWidth;
const canvasWidth = Math.floor(clientWidth * 0.15);
const canvasL = document.getElementById("leftCanvas");
canvasL.setAttribute("width", canvasWidth + "px");

这样就可以使画布适应不同屏幕大小。

以下为未整理代码,较乱,仅供参考。

https://codepen.io/jbleach/pe…

原文链接:https://segmentfault.com/a/1190000017867171

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-50830.html

文章标题:使用canvas绘制圆弧动画

相关文章
梳理前端开发使用eslint-prettier检查和格式化代码
问题痛点 在团队的项目开发过程中,代码维护所占的时间比重往往大于新功能的开发。因此编写符合团队编码规范的代码是至关重要的,这样做不仅可以很大程度地避免基本语法错误,也保证了代码的可读性。 对于代码版本管理系统(svn 和 git或者其他)...
2018-05-07
AngularJS:何时应该使用Directive、Controller、Servic
AngularJS是一款非常强大的前端MVC框架。同时,它也引入了相当多的概念,这些概念我们可能不是太熟悉。(译者注:老外真谦虚,我大天朝的码农对这些概念那是相当熟悉啊!)这些概念有: Directive(指令) Controller(控制...
2015-11-11
vue-awesome-swiper的使用以及API整理
一、先说一个看关于vue-awesome-swiper的一个坑 vue项目的package.json中显示的&lt;span style=“color: orange;”&gt;“vue-awesome-swiper”: “^2.5.4”&...
2018-04-26
Bootstrap table简单使用总结
最近接触一个很棒的插件,Bootstrap table没做过前端的表示对table的印象还只停留在html的table标签那一套,用过bootstrap table之后不得不说真的很实用。 构造方式 1 、HTML &lt;div clas...
2017-03-17
vue使用watch 观察路由变化,重新获取内容
问题背景: 点击用户头像 =&gt; 进入用户个人中心,在用户个人中心里点击其他用户的头像,我希望显示被点击用户的个人中心,但只看到了路由参数在发生变化,页面内容并没有更新。如图: 页面代码如下: &lt;script&gt; exp...
2017-03-13
如何使用JavaScript
一、应用&lt;script&gt;标签加入JavaScript 任何脚本语言均可以通过&lt;script&gt;…&lt;/script&gt;标记对加入到HTML代码中(即是加入到网页文档&lt;html&gt;…&lt;/html&...
2015-11-12
canvas实现流星雨的背景效果
看到一个很棒的流星雨效果。修改一下样式就可以作为网页背景了。。! &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=&quot;utf-8&quot...
2017-03-09
使用 Protocol Buffers 代替 JSON 的五个原因
在 Ruby 和 Rails 开发者中,面向服务 (Service-Oriented) 架构有一个当之无愧的名声,它是一个缓解程序规模恶性增长的一个强有力的途径,可在大量应用程序中提取关注点。这些新生小巧的服务通常继续使用 Rails 或 ...
2016-01-13
ajax教程之ajax使用Http请求
ajax中是如何让使用http请求的呢? 在传统的JS编程中,如果您希望从服务器上的文件或数据库中得到任何的信息,或者向服务器发送信息的话,就必须利用一个 HTML 表单向服务器 GET 或 POST 数据。而用户则需要单击“提交”按钮来发...
2015-11-12
js使用split函数按照多个字符对字符串进行分割的方法
本文实例讲述了js使用split函数按照多个字符对字符串进行分割的方法。分享给大家供大家参考。具体分析如下: js中的split()函数可以对字符串按照指定的符号进行分割,但是如果字符串中存在多个分割符号,js的split()函数是否还可以...
2017-03-21
回到顶部