[深入14] canvas javascript前端

导航 [[深入01] 执行上下文](https://juejin.im/post/684490...
[[深入02] 原型链](https://juejin.im/post/684490...
[[深入03] 继承](https://juejin.im/post/684490...
[[深入04] 事件循环](https://juejin.im/post/684490...
[[深入05] 柯里化偏函数函数记忆](https://juejin.im/post/684490...
[[深入06] 隐式转换和运算符](https://juejin.im/post/684490...
[[深入07] 浏览器缓存机制（http缓存机制）](https://juejin.im/post/684490...
[[深入08] 前端安全](https://juejin.im/post/684490...
[[深入09] 深浅拷贝](https://juejin.im/post/684490...
[[深入10] Debounce Throttle](https://juejin.im/post/684490...
[[深入11] 前端路由](https://juejin.im/post/684490...
[[深入12] 前端模块化](https://juejin.im/post/684490...
[[深入13] 观察者模式发布订阅模式双向数据绑定](https://juejin.im/post/684490...
[[深入14] canvas](https://juejin.im/post/684490...
[[深入15] webSocket](https://juejin.im/post/684490...
[[深入16] webpack](https://juejin.im/post/684490...
[[深入17] http 和 https](https://juejin.im/post/684490...
[[深入18] CSS-interview](https://juejin.im/post/684490...
[[深入19] 手写Promise](https://juejin.im/post/684490...
[[深入20] 手写函数](https://juejin.im/post/684490...
[[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 / 1801°的弧度 = 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 - 锐客网* { margin: 0; padding: 0; } html { height: 100%; } body { height: 100%; display: flex; justify-content: center; align-items: center; } #canvas { border: 1px solid red; }

实例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 - 锐客网* { margin: 0; padding: 0; } #canvas { // 设置canvas的背景，可以用别的图片作为底层，将canvas移动到图片上重叠 background-image: url('./4.jpg'); background-position: center; background-repeat: no-repeat; background-size: cover; border: 1px solid red; }

资料 【[深入14] canvas】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...