[[react] Hooks](https://juejin.im/post/684490...

[[部署01] Nginx](https://juejin.im/post/684490...
[[部署02] Docker 部署vue项目](https://juejin.im/post/684490...
[[部署03] gitlab-CI](https://juejin.im/post/684490...

[[源码-webpack01-前置知识] AST抽象语法树](https://juejin.im/post/684490...
[[源码-webpack02-前置知识] Tapable](https://juejin.im/post/684490...
[[源码-webpack03] 手写webpack - compiler简单编译流程](https://juejin.im/post/684490...
[[源码] Redux React-Redux01](https://juejin.im/post/684490...
[[源码] axios ](https://juejin.im/post/684490...
[[源码] vuex ](https://juejin.im/post/684490...
[[源码-vue01] data响应式和初始化渲染 ](https://juejin.im/post/684490...
[[源码-vue02] computed 响应式 - 初始化，访问，更新过程 ](https://juejin.im/post/684490...

前置知识

一些单词

canvas：画布

triangle：三角形
rectangle：矩形

arc：弧
anti：反对，反
clockwise：顺时针方向
anticlockwise：逆时针方向

curve：曲线
quadratic：平方的

弧长弧度

弧度 = 弧长 / 半径

弧度 = 弧长 / 半径

圆的弧长 = 2PI * R   //即周长

1°的弧长 = 2PI * R / 360 = PI * R / 180

1°的弧度 = PI / 180

canvas

属性

只有两个属性：with 和 height 默认的width=300，height=150
标准方式：canvas 标签自带的 width 和 height 属性
css方式
js方式： domTarget.width 和 domTarget.height

在不支持canvas的浏览器中显示 (替换内容)

替换内容：写在canvas便签内
不支持的浏览器将显示替换内容，而支持的浏览器会忽略标签内的内容
注意：canvas必须有结束标签，如果没有，后面的内容将被认为是替换的内容

渲染上下文 - the render context

getContext() 方法
- 获取 ( 渲染上下文 ) 和 ( 绘画功能 )
- 参数：表示( 上下文的格式 ) 2d ， 3d

如何判断浏览器是否支持canvas标签

var canvas = document.getElementById('canvas');
if (canvas.getContext) { // ------------------------ 通过判断 getContext 方法是否存在来判断
  console.log('你的浏览器支持Canvas!');
} else {
  console.log('你的浏览器不支持Canvas!');
}

模块

实例2：实现一个粒子文字动画

getImageData()

context.getImageData(x,y,width,height)
getImageData() 返回 ( ImageData对象 )，获取画布指定矩形的像素数据

putImageData()

将 ImageData对象绘制到 canvas 上

ImageData对象

包含 width height data 三个属性
data属性：是一个数组( Uint8ClampedArray )，包含以 RGBA 顺序的数据，数据使用 0 至 255（包含）的整数表示
- 图像是二维的，由height决定行数，width决定列数
- R - 红色 (0-255)
- G - 绿色 (0-255)
- B - 蓝色 (0-255)
- A - alpha 通道 (0-255; 0 是透明的， 255 是完全可见的)
- alpha的值大于128，即为有颜色的点
- 注意：data中点的排列顺序是 从左到右，从上到下的顺序，而每个点占数组的四个成员

context.save() 和 context.restore()

context.save()用来保存canvas的状态
- save后可以调用canvas的平移，缩放，旋转，裁剪等操作
context.restore()
- 恢复之前保存的状态

实现静态粒子文字




  
  
  Document

实例3：时钟动画

弧度 = 弧长 / 半径

context.translate()

context.translate(x, y)，从新映射画布上的 (0, 0) 位置

context.font

context.font = "40px Arial" 设置文本内容的字体属性

context.textAlign

context.textAlign = 'center' --------- 设置文本 ( 左右对齐 ) 方式

context.textBaseline

context.textBaseline = 'middle' ----- 设置文本的 ( 上下对齐 ) 方式

context.fillText()

context.fillText(text, x, y, maxWidth) 在画布上绘制填色的文本，默认黑色

sin函数，cos 函数

cos(180° - a) = - cos(a)
sin(180° - a) = sin(a)
sin(2a) = 2 * sin(a) * cos(a)

context.rotate()

context.rotate(angle) 旋转当前绘图，参数以弧度计算

context.lineWidth

context.lineWidth = 10 设置线条宽度，以像素计算

context.lineCap

context.lineCap = 'round' 设置线条末端线帽的样式

context.save() 和 context.restore()

context.save() 保存当前环境状态
context.restore() 返回之前保存过的路径状态和属性




  
  
  Document

实例4：缩放图像

HTML5滑动条

滑动条
注意：input标签是单标签，即没有结束标签
html单标签有：，，，，，

min：允许的最小值
max：允许的最大值
step：数字间隔
value：默认值

context.drawImage() --- 重点理解这9个参数

context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height)
sx：要裁剪的原图像的起始点x坐标
sy：要裁剪的原图像的起始点y坐标
swidth：要裁剪的原图像的宽度
sheight：要裁剪的原图像的高度
x：裁剪完的图像要放在canvas上的起始点的x坐标
y：裁剪完的图像要放在canvas上的起始点的y坐标
width：裁剪完的图像要放在canvas上的宽度
height：裁剪完的图像要放在canvas上的高度




  
  
  Document

实例5：刮刮卡

content.globalCompositeOperation

context.globalCompositeOperation = 'source-over' 设置如何将源(新的)图像设置到目标(已有)图像上
Composite：组合，合成
destination：目标，终点 n
红色色表示源(新的)图像，蓝色表示目标(已有)图像

context.lineJoin

context.lineJoin = 'round' 设置当两条线相交时，边角的类型
context.linWidth = 40
context.linCap = 'round'

canvas中获取鼠标的坐标有很大的偏移，不精确？

canvas的宽高必须在canvas标签中设置，不能用css设置，不然会偏移

代码




  
  
  Document

资料

canvas-api：https://www.w3school.com.cn/t...
MDN：https://developer.mozilla.org...
ImageData对象：https://developer.mozilla.org...
canvas转成图片保存：https://segmentfault.com/a/11...
粒子动画3：https://juejin.im/post/684490...
粒子动画1：https://juejin.im/post/684490...
时钟动画：https://www.imooc.com/video/1...
globalCompositeOperation1：https://www.w3school.com.cn/t...
globalCompositeOperation2：https://www.w3school.com.cn/t...
刮刮卡1：https://juejin.im/post/684490...
刮刮卡2：https://juejin.im/post/684490...

[深入14] canvas

导航

前置知识

一些单词

弧长弧度

canvas

属性

在不支持canvas的浏览器中显示 (替换内容)

渲染上下文 - the render context

如何判断浏览器是否支持canvas标签

模块

实例2：实现一个粒子文字动画

getImageData()

putImageData()

ImageData对象

context.save() 和 context.restore()

实现静态粒子文字

实例3：时钟动画

context.translate()

context.font

context.textAlign

context.textBaseline

context.fillText()

sin函数，cos 函数

context.rotate()

context.lineWidth

context.lineCap

context.save() 和 context.restore()

实例4：缩放图像

HTML5滑动条

context.drawImage() --- 重点理解这9个参数

实例5：刮刮卡

content.globalCompositeOperation

context.lineJoin

canvas中获取鼠标的坐标有很大的偏移，不精确？

代码

资料

你可能感兴趣的:(javascript前端)

[深入14] canvas

导航

前置知识

一些单词

弧长 弧度

canvas

属性

在不支持canvas的浏览器中显示 (替换内容)

渲染上下文 - the render context

如何判断浏览器是否支持canvas标签

模块

实例2：实现一个粒子文字动画

getImageData()

putImageData()

ImageData对象

context.save() 和 context.restore()

实现静态粒子文字

实例3：时钟动画

context.translate()

context.font

context.textAlign

context.textBaseline

context.fillText()

sin函数，cos 函数

context.rotate()

context.lineWidth

context.lineCap

context.save() 和 context.restore()

实例4：缩放图像

HTML5滑动条

context.drawImage() --- 重点理解这9个参数

实例5：刮刮卡

content.globalCompositeOperation

context.lineJoin

canvas中获取鼠标的坐标有很大的偏移，不精确？

代码

资料

你可能感兴趣的:(javascript前端)

弧长弧度