canvas-基础篇

前言 课件地址 https://github.com/buglas/canvas-lesson 课堂目标 1.理解合成的原理。 2.可以灵活熟练的合成图像。 知识点 1.透明度合成 globalAlp

前言 课件地址 https://github.com/buglas/canvas-lesson 课堂目标 1.掌握上下文对象的状态的管理方法。 2.可以灵活使用变换操控图形。 知识点 1.上下文对象的

课件地址 github.com/buglas/canv… 我们可以逐行列遍历ImageData 对象里的像素，将特定区域的颜色变成色块，从而变成马赛克效果。 整体代码： 总结 我们可以通过不同的算法，

我们可以逐像素遍历ImageData 对象中的每个像素，然后将其置灰，效果如下： 像素置灰的算法是： 整体代码：

前言 课件地址 https://github.com/buglas/canvas-lesson 课堂目标 1.理解ImageData() 对象的获取方式。 2.可以灵活操作像素。 知识点 1.Imag

我们可以利用对雪碧图的裁剪，制作像gif那样的逐帧动画。我们可以先对雪碧图进行裁剪，然后每隔一定时间移动一下裁剪位置。

前言 课件地址 https://github.com/buglas/canvas-lesson 课堂目标 1.理解图像的获取方式。 2.在canvas 中灵活绘制图像 知识点 图像源 绘制图像的方法

金属字可以用金属色渐变实现。 金属字可以应用于硬朗冷峻、现代科技感的场景，比如《检察风云》、《环太平洋》等。 整体代码： 注：在绘制描边文本时，文字的拐角越小，其厚度越大，如本案例中的“M”字母。 c

我们之前说canvas样式的时候，说过霓虹灯的实现原理，将霓虹灯样式交给文字便是霓虹灯文字了。 霓虹灯文字可以应用于传统活动庆典、游戏厅、KTV等相关场景。 整体代码：

布艺文字的特点在于针线缝边效果，这个效果可以用文字的虚线描边实现。 布艺文字可以应用于服装店、玩具店、手工艺品等相关场景。 整体代码： \

前言 课件地址 https://github.com/buglas/canvas-lesson 课堂目标 1.理解文本的属性和绘制方法。 2.可以灵活熟练的绘制文本。 知识点 文本的属性 文本的绘制方

前言 课件地址 https://github.com/buglas/canvas-lesson 课堂目标 掌握canvas 所提供的样式。 能够绘制丰富多彩的图形。 知识点 图形着色的区域 图形着色的

前言 课件地址 https://github.com/buglas/canvas-lesson 课堂目标 1.理解canvas 坐标系和栅格。 2.能够熟练绘制canvas 图形。 知识点 1.can

前言 课件地址 https://github.com/buglas/canvas-lesson 课前准备 1.安装webstorm 或vscode 开发工具。 2.安装live-server，用于启服