为什么使用 Canvas?
Canvas ，就是高级画笔扩展。
既然它叫做高级画笔，它是可以画点什么吗？它和普通画笔又有什么区别呢？
Canvas 是从 Html 中的 <canvas> 标签而来的，在 JavaScript 的加持下，Canvas 就像一块神奇的画布，可以画你喜欢的东西。
Canvas 内部集成了丰富的 API，可以支持你更加简单、快捷地画出你喜欢的东西。
例如像下面这样的火焰特效、转动的 pizza、瀑布特效。
最佳实践
comming soon……
功能与解释
Canvas 的坐标系
在开始用 Canvas 进行绘画之前，我们需要了解 Canvas 的坐标系，它与我们 Scratch 的坐标系略有不同。
Scratch 坐标系如下图所示：
/w=828,quality=90,fit=scale-down)
Canvas 的坐标系原点在左上角，也就是（0,0）。Canvas 长 480 像素，宽 360 像素。如下图所示：
/w=828,quality=90,fit=scale-down)
如果对 Canvas 坐标感到陌生，可以使用坐标转换语句来完成 Canvas 坐标与 Scratch 坐标的相互转换。
移到最前面
把当前画布移动到最前面/最后面
属性 | 描述 | 示例参数 |
图层位置 | 这里有 2 种参数
- 前面: 把当前画布移动到顶层。
- 后面: 把当前画布移动到底层。 | 前面 |
前移画布
把当前画布向前/向后移动几层
属性 | 描述 | 示例参数 |
图层位置 | 这里有 2 种参数
- 前移: 把当前画布向前移动。
- 后移: 把当前画布向后移动。 | 前移 |
图层数字 | 移动的层数 | 3 |
擦除当前画布
可以擦除当前画布的所有内容
转换 scratch x 到 canvas
可以将 Scratch 的 x 坐标转换为 Canvas 的 x 坐标
属性 | 描述 | 示例参数 |
坐标数值 | x 坐标的数值 | 100 |
转换 scratch y 到 canvas
可以将 Scratch 的 y 坐标转换为 Canvas 的 y 坐标
属性 | 描述 | 示例参数 |
坐标数值 | y 坐标的数值 | 100 |
转换 canvas x 到 scratch
可以将 Canvas 的 x 坐标转换为 Scratch 的 x 坐标
属性 | 描述 | 示例参数 |
坐标数值 | x 坐标的数值 | 100 |
转换 canvas y 到 scratch
可以将 Canvas 的 y 坐标转换为 Scratch 的 y 坐标
属性 | 描述 | 示例参数 |
坐标数值 | y 坐标的数值 | 100 |
矩形擦除
可以按照矩形的形状擦除掉绘制在画布上的内容
属性 | 描述 | 示例参数 |
坐标数值 | 起点 x 坐标的数值 | 100 |
坐标数值 | 起点 y 坐标的数值 | 100 |
尺寸 | 宽度 | 100 |
尺寸 | 高度 | 100 |
圆形擦除
可以按照圆形的形状擦除掉绘制在画布上的内容
属性 | 描述 | 示例参数 |
坐标数值 | 圆心 x 坐标的数值 | 100 |
坐标数值 | 圆心 y 坐标的数值 | 100 |
尺寸 | 半径长度 | 100 |
设置透明度
可以设置透明度
属性 | 描述 | 示例参数 |
数值 | 透明度数值 | 50 |
设置画笔颜色
可以设置画笔的颜色
属性 | 描述 | 示例参数 |
颜色 | 通过颜色、饱和度、亮度进行颜色设置
也可以直接取色 | 见下图 |
设置画笔的填充颜色
可以设置画笔的填充颜色
属性 | 描述 | 示例参数 |
填充方式 | 这里有 3 种参数
- 填充: 填充的颜色。
- 描边: 描边的颜色。
- 填充和描边: 填充和描边的颜色。 | 填充 |
颜色 | 通过颜色、饱和度、亮度进行颜色设置
也可以直接取色 | 见下图 |
填充模式开启
可以控制是否对绘制的闭合图形进行填充
属性 | 描述 | 示例参数 |
开关 | 这里有 2 种参数
- 开启: 表示会对接下来绘制的闭合图形完成填充。
- 关闭: 表示不会对接下来绘制的闭合图形填充。 | 开启 |
设置线条宽度
可以设置画笔粗细
属性 | 描述 | 示例参数 |
数值 | 线条的宽度 | 10 |
设置线头
可以设置线头的形状
属性 | 描述 | 示例参数 |
形状 | 这里有 2 种参数
- 圆: 圆形线头。
- 方: 方形线头。 | 圆 |
画点
可以在指定位置绘制一个点
属性 | 描述 | 示例参数 |
坐标数值 | 点 x 坐标的数值 | 100 |
坐标数值 | 点 y 坐标的数值 | 100 |
画线
可以指定起点和终点位置，绘制一条线
属性 | 描述 | 示例参数 |
坐标数值 | 起点 x 坐标的数值 | 0 |
坐标数值 | 起点 y 坐标的数值 | 0 |
坐标数值 | 终点 x 坐标的数值 | 100 |
坐标数值 | 终点 y 坐标的数值 | 100 |
画矩形
可以绘制一个矩形
属性 | 描述 | 示例参数 |
坐标数值 | 起点 x 坐标的数值 | 100 |
坐标数值 | 起点 y 坐标的数值 | 100 |
尺寸 | 宽度 | 100 |
尺寸 | 高度 | 100 |
使用如下这段代码，就可以得到这样的图形。
画三角形
可以指定三个顶角的位置，绘制一个三角形
属性 | 描述 | 示例参数 |
坐标数值 | 第一个角 x 坐标的数值 | 50 |
坐标数值 | 第一个角 y 坐标的数值 | 50 |
坐标数值 | 第二个角 x 坐标的数值 | 50 |
坐标数值 | 第二个角 y 坐标的数值 | 100 |
坐标数值 | 第三个角 x 坐标的数值 | 100 |
坐标数值 | 第三个角 y 坐标的数值 | 50 |
画圆形
可以指定圆心的位置和半径长度，绘制一个圆
属性 | 描述 | 示例参数 |
坐标数值 | 圆心 x 坐标的数值 | 200 |
坐标数值 | 圆心 y 坐标的数值 | 200 |
尺寸 | 半径长度 | 100 |
绘制贝塞尔曲线
可以绘制出一段贝塞尔曲线
属性 | 描述 | 示例参数 |
坐标数值 | 起点 x 坐标的数值 | 170 |
坐标数值 | 起点 y 坐标的数值 | 120 |
坐标数值 | 终点 x 坐标的数值 | 150 |
坐标数值 | 终点 y 坐标的数值 | 230 |
坐标数值 | 第一个控制点 x 坐标的数值 | 110 |
坐标数值 | 第一个控制点 y 坐标的数值 | 80 |
坐标数值 | 第二个控制点 x 坐标的数值 | 90 |
坐标数值 | 第二个控制点 y 坐标的数值 | 260 |
下图为贝塞尔曲线原理图示意，蓝色为起点和终点，红色为控制点。
/w=1080,quality=90,fit=scale-down)
使用如下这段代码，就可以得到一个粉色的爱心。
绘制文字
可以从指定位置开始绘制文字
属性 | 描述 | 示例参数 |
文字内容 | 要绘制的文字内容 | Hello Gandi |
坐标数值 | 绘制位置 x 坐标的数值 | 200 |
坐标数值 | 绘制位置 y 坐标的数值 | 200 |
绘制文字并填充
可以从指定位置开始绘制文字并设置填充方式
属性 | 描述 | 示例参数 |
文字内容 | 要绘制的文字内容 | Hello Gandi |
坐标数值 | 绘制位置 x 坐标的数值 | 200 |
坐标数值 | 绘制位置 y 坐标的数值 | 200 |
填充方式 | 这里有 3 种参数
- 填充: 填充的颜色。
- 描边: 描边的颜色。
- 填充和描边: 填充和描边的颜色。 | 填充 |
设置文字大小
可以设置字体大小
属性 | 描述 | 示例参数 |
数值 | 字体大小数值 | 12 |
设置文字字体
可以设置字体
属性 | 描述 | 示例参数 |
字体 | 这里有各种字体作为参数：
方正达利体、干图小兔体、Pixel…… | 方正达利体 |
加载图片
可以完成图片的加载
属性 | 描述 | 示例参数 |
图片地址 | 图片的名字（通过上传图片功能获取） | 4fa74fbc5b48081dc5af646439760270.png |
获取图片原始宽度
可以获取图片原始宽度
属性 | 描述 | 示例参数 |
图片地址 | 图片的名字（通过上传图片功能获取） | 4fa74fbc5b48081dc5af646439760270.png |
获取图片原始高度
可以获取图片原始高度
属性 | 描述 | 示例参数 |
图片地址 | 图片的名字（通过上传图片功能获取） | 4fa74fbc5b48081dc5af646439760270.png |
绘制图片
可以完成图片的绘制
属性 | 描述 | 示例参数 |
图片地址 | 图片的名字（通过上传图片功能获取） | 4fa74fbc5b48081dc5af646439760270.png |
坐标数值 | 绘制位置 x 坐标的数值 | 85 |
坐标数值 | 绘制位置 y 坐标的数值 | 60 |
尺寸 | 绘制的宽度 | 0 |
尺寸 | 绘制的高度 | 0 |
【小技巧】如果宽高使用（0,0），就将自动绘制图片的原始宽高，不过如果你的图片过大，可以使用图片压缩工具进行压缩。
上传图片
可以上传图片
点击它，然后选择本地文件进行上传。完成上传后，从弹窗中复制图片的文件名，粘贴到代码块中就可以使用图片了。
使用如下这段代码，就可以得到这样一张图片。
同步绘制
可以开启同步绘制功能
属性 | 描述 | 示例参数 |
开关 | 这里有 2 种参数
- 开启: 表示开启同步绘制功能。
- 关闭: 表示关闭同步绘制功能。 | 开启 |
绘制到舞台区
可以将内容绘制到舞台区
开始描绘路径
可以标记画笔开始绘制路径的起点
闭合描绘路径
可以让画笔绘制的路径闭合起来
移动到点
可以让画笔移动到指定位置
属性 | 描述 | 示例参数 |
坐标数值 | 点 x 坐标的数值 | 100 |
坐标数值 | 点 y 坐标的数值 | 100 |
画线到点
可以让画笔画线到指定位置
.svg)
属性 | 描述 | 示例参数 |
坐标数值 | 点 x 坐标的数值 | 100 |
坐标数值 | 点 y 坐标的数值 | 100 |
逆时针画弧
可以指定圆心的位置、半径长度、弧线起止、绘制方向，绘制一段弧线
属性 | 描述 | 示例参数 |
绘制方向 | 这里有 2 种参数
- 逆时针: 表示逆时针绘制。
- 顺时针: 表示顺时针绘制。 | 逆时针 |
坐标数值 | 圆心 x 坐标的数值 | 200 |
坐标数值 | 圆心 y 坐标的数值 | 200 |
尺寸 | 半径长度 | 100 |
数值 | 弧度数值 | 0 |
数值 | 弧度数值 | 1 |
剪切
可以剪切绘制内容
描边
可以描绘边框
填充
可以完成封闭形状的填充
获取文字渲染宽度
可以获取文字渲染宽度
属性 | 描述 | 示例参数 |
文字内容 | 要绘制的文字内容 | Hello Gandi |
缩放宽度和高度
可以对画布的宽度和高度进行缩放
属性 | 描述 | 示例参数 |
数值 | 宽度的缩放比例 | 50 |
数值 | 高度的缩放比例 | 50 |
旋转角度
可以让画布旋转指定角度
属性 | 描述 | 示例参数 |
数值 | 角度的数值 | 120 |
画布偏移
可以让画布偏移到指定位置
属性 | 描述 | 示例参数 |
坐标数值 | 目标点 x 坐标的数值 | 100 |
坐标数值 | 目标点 y 坐标的数值 | 100 |
画布变换矩阵
可以让画布按照指定方式变换
属性 | 描述 | 示例参数 |
数值 | 水平缩放的数值 | 1.5 |
数值 | 垂直倾斜的数值 | 1.5 |
数值 | 水平倾斜的数值 | 1.5 |
数值 | 垂直缩放的数值 | 1.5 |
数值 | 水平移动的数值 | 1.5 |
数值 | 垂直移动的数值 | 1.5 |
清除画布变换矩阵
可以清除画布变换矩阵效果（缩放、偏移、旋转）
保存画布当前状态
可以保存画布当前状态
恢复到上一次保存的状态
可以恢复到上一次保存的画布状态
绘制角色的画布数据到点
可以绘制舞台或者某角色的画布数据到指定的位置
属性 | 描述 | 示例参数 |
角色名 | 这里至少有 1 种参数
- Stage: 表示舞台。
- 角色名: 表示当前工程中的角色名。 | Stage |
坐标数值 | 目标点 x 坐标的数值 | 100 |
坐标数值 | 目标点 坐标的数值 | 100 |
设置合成模式
可以设置不同的合成模式
属性 | 描述 | 示例参数 |
模式 | 这里有各种模式作为参数：
sourece-over、sourece-in、sourece-out…… | sourece-over |
重置
可以重置画布、画笔的所有设置
相关文章
社区中其他人写的 Canvas 文章
更新日志
版本 | 说明 |
2.0 | 增加了亿点点功能：
1. 更多绘制语句 |
1.0 | 初始版本
1.基础绘制语句 |