由一条射线引发的圆的动画

原创 NAI 随笔 前端代码字段-前端特效 1554阅读 2017-12-04 13:28:49 举报

**HTML5 canvas绘图基本使用方法:<canvas></canvas>是HTML5中新增的标签,用于绘制图形,实际上,这个标签和其他的标签一样,其特殊之处在于该标签可以获取一个CanvasRenderingContext2D对象,我们可以通过JavaScript脚本来控制该对象进行绘图。
<canvas></canvas>只是一个绘制图形的容器,除了id、class、style等属性外,还有height和width属性。在<canvas>>元素上绘图主要有三步:
(1)获取<canvas>元素对应的DOM对象,这是一个Canvas对象;
(2)调用Canvas对象的getContext()方法,得到一个CanvasRenderingContext2D对象;
(3)调用CanvasRenderingContext2D对象进行绘图。
A绘制线段moveTo()和lineTo()。
如果没有通过moveTo()特别指定,lineTo()的起始点是以上一个点为准。因此,如果需要重新选择起始点,则需要通过moveTo()方法。如果需要对不同的线段设置样式,则需要通过context.beginPath()重新开启一条路径。
B绘制矩形rect()、fillRect()和strokeRect()。
context.rect( x , y , width , height ):只定义矩形的路径;
context.fillRect( x , y , width , height ):直接绘制出填充的矩形;
context.strokeRect( x , y , width , height ):直接绘制出矩形边框;
这里需要说明两点:第一点就是stroke()和fill()绘制的前后顺序,如果fill()后面绘制,那么当stroke边框较大时,会明显的把stroke()绘制出的边框遮住一半;第二点:设置fillStyle或strokeStyle属性时,可以通过“rgba(255,0,0,0.2)”的设置方式来设置,这个设置的最后一个参数是透明度。另外还有一个跟矩形绘制有关的:清除矩形区域:context.clearRect(x,y,width,height)。
接收参数分别为:清除矩形的起始位置以及矩形的宽和长。
线条属性
除了上面用到的lineWidth属性,线条还有以下几个属性:
lineCap 属性设置或返回线条末端线帽的样式,可以取以下几个值:
“butt” 向线条的每个末端添加平直的边缘(默认);
“round” 向线条的每个末端添加圆形线帽;
“square” 向线条的每个末端添加正方形线帽。
lineJoin 属性当两条线交汇时设置或返回所创建边角的类型,可以取以下几个值:
“miter” 创建尖角(默认);
“bevel” 创建斜角;
“round” 创建圆角。
miterLimit 属性设置或返回最大斜接长度(默认为10)。斜接长度指的是在两条线交汇处内角和外角之间的距离。只有当 lineJoin 属性为 “miter” 时,miterLimit 才有效。
填充样式
前面用到的fillStyle和strokeStyle除了设置颜色外,还能设置其他填充样式。
线性渐变
使用步骤
(1)var grd = context.createLinearGradient( xstart , ystart, xend , yend )创建一个线性渐变,设置起始坐标和终点坐标;
(2)grd.addColorStop( stop , color )为线性渐变添加颜色,stop为0~1的值;
(3)context.fillStyle=grd将赋值给context。
径向渐变
该方法与线性渐变使用方法类似,只是第一步接收的参数不一样
var grd = context.createRadialGradient(x0 , y0, r0 , x1 , y1 , r1 );接收起始圆心的坐标和圆半径以及终点圆心的坐标和圆的半径。
位图填充
createPattern( img , repeat-style )使用图片填充,repeat-style可以取repeat、repeat-x、repeat-y、no-repeat。
图形变换
平移:context.translate(x,y),接收参数分别为原点在x轴方向平移x,在y轴方向平移y。
缩放:context.scale(x,y),接收参数分别为x坐标轴按x比例缩放,y坐标轴按y比例缩放。
旋转:context.rotate(angle),接收参数是坐标轴旋转的角度。
需要说明的是,对图形进行变化后,接下来的一次绘图是紧接着上一次的状态的,所以如果需要回到初始状态,要用到context.save();和context.restore();来保存和恢复当前状态:
另外一个跟图形变换相关的是:矩阵变换 :context.transform(a, b, c, d, e, f, g)。参数的含义如下:
a 水平缩放 ( 默认为1 )
b 水平倾斜 ( 默认为 0 )
c 垂直倾斜 ( 默认为 0 )
d 垂直缩放 ( 默认为1 )
e 水平位移 ( 默认为 0 )
f 垂直位移 ( 默认为 0 )
绘制曲线**
跟绘制曲线的有四个函数,分别是:
context.arc(x,y,r,sAngle,eAngle,counterclockwise);用于创建弧/曲线(用于创建圆或部分圆)。接收的参数含义:

| 参数 | 含义 |
| :————- |:————-|
| x | 圆的中心的 x 坐标 |
|y|圆的中心的 y 坐标|
|r|圆的半径|
|sAngle|起始角,以弧度计(弧的圆形的三点钟位置是 0 度)|
|eAngle|结束角,以弧度计|
|counterclockwise|可选。规定应该逆时针还是顺时针绘图。False = 顺时针,true = 逆时针|
绘制圆弧
context.arcTo(x1,y1,x2,y2,r); 在画布上创建介于两个切线之间的弧/曲线。接收的参数含义:
参数 含义
x1 弧的控制点的 x 坐标
y1 弧的控制点的 y 坐标
x2 弧的终点的 x 坐标
y2 弧的终点的 y 坐标
r 弧的半径
这里需要注意的是arcTo函数绘制的曲线的起始点需要通过moveTo()函数来设置,下面利用arcTo函数绘制一个圆角矩形:
context.quadraticCurveTo(cpx,cpy,x,y);绘制二次贝塞曲线,参数含义如下:
参数 含义
cpx 贝塞尔控制点的 x 坐标
cpy 贝塞尔控制点的 y 坐标
x 结束点的 x 坐标
y 结束点的 y 坐标
曲线的开始点是当前路径中最后一个点。如果路径不存在,那么请使用 beginPath() 和 moveTo() 方法来定义开始点。
context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y); 绘制三次贝塞尔曲线,参数如下:
参数 含义
cp1x 第一个贝塞尔控制点的 x 坐标
cp1y 第一个贝塞尔控制点的 y 坐标
cp2x 第二个贝塞尔控制点的 x 坐标
cp2y 第二个贝塞尔控制点的 y 坐标
x 结束点的 x 坐标
y 结束点的 y 坐标
文字渲染
与文本渲染有关的主要有三个属性以及三个方法:
属性 描述
font 设置或返回文本内容的当前字体属性
textAlign 设置或返回文本内容的当前对齐方式
textBaseline 设置或返回在绘制文本时使用的当前文本基线
方法 描述
fillText() 在画布上绘制”被填充的”文本
strokeText() 在画布上绘制文本(无填充)
measureText() 返回包含指定文本宽度的对象
阴影绘制
shadowColor 设置或返回用于阴影的颜色。
shadowBlur 设置或返回用于阴影的模糊级别(数值越大越模糊)。
shadowOffsetX 设置或返回阴影与形状的水平距离。
shadowOffsetY 设置或返回阴影与形状的垂直距离。
图形组合
globalAlpha: 设置或返回绘图的当前 alpha 或透明值
该方法主要是设置图形的透明度,这里就不具体介绍。
globalCompositeOperation: 设置或返回新图像如何绘制到已有的图像上,该方法有以下属性值:
值 描述
source-over 在目标图像上显示源图像(默认)
source-atop 在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的
source-in 在目标图像中显示源图像。只有目标图像之内的源图像部分会显示,目标图像是透明的
source-out 在目标图像之外显示源图像。只有目标图像之外的源图像部分会显示,目标图像是透明的
destination-over 在源图像上显示目标图像
destination-atop 在源图像顶部显示目标图像。目标图像位于源图像之外的部分是不可见的
destination-in 在源图像中显示目标图像。只有源图像之内的目标图像部分会被显示,源图像是透明的
destination-out 在源图像之外显示目标图像。只有源图像之外的目标图像部分会被显示,源图像是透明的
lighter 显示源图像 + 目标图像
copy 显示源图像。忽略目标图像
xor 使用异或操作对源图像与目标图像进行组合
剪辑区域
clip()方法从原始画布中剪切任意形状和尺寸。
提示:一旦剪切了某个区域,则所有之后的绘图都会被限制在被剪切的区域内(不能访问画布上的其他区域)。您也可以在使用 clip() 方法前通过使用 save() 方法对当前画布区域进行保存,并在以后的任意时间对其进行恢复(通过 restore() 方法)
除了上述的属性的和方法,还有以下等方法:
drawImage(): 向画布上绘制图像、画布或视频。
toDataURL() :保存图形
isPointInPath(): 如果指定的点位于当前路径中,则返回 true,否则返回 false。
复制粘贴的累了,想看例子就看出处【http://blog.csdn.net/u014607184/article/details/51746384】,这里就不逐个举例说明了
接下来,我们来看看正题,我一不小心搞出来的小东西,还挺好看的!事情是这样的,我想用canvas画有动画感的圆弧,然后,参考了一条射线【http://www.qdfuns.com/notes/15148/a7a45ffecb3fc725c1110e352bd1293a.html】,画出了不一样的圆和弧
html 代码

这个是我想要的圆弧,然后稍微改动一下。
html 代码

是不是很酷呢?再来
html 代码

最后,稍加修改,就是缓缓地心❤
html 代码

就是这些了,是不是很漂亮呢?嘻嘻

评论 ( 6 )
最新评论
黑笔 2017-12-06 15:06:51 6F

我也就拉到最下面看看效果罢了!

wocacaca 3F 2017-12-05 17:09:33 5F

说多了都是泪,感觉自己越来越懒了

NAI 3F 2017-12-05 15:05:54 4F

自己写点代码,还是很开心的。

老姚 2017-12-05 13:36:16 3F

有多少人像我现在这样,看看效果就拉倒了。少了那份耐心去研究原理了。

NAI 1F 2017-12-04 17:51:31 2F

可能颜色你看不清……

18672293959 2017-12-04 17:14:02 1F

为什么 什么效果都看不了