为什么使用 Canvas?
Canvas ,就是高级画笔扩展。
既然它叫做高级画笔,它是可以画点什么吗?它和普通画笔又有什么区别呢?
Canvas 是从 Html 中的 <canvas> 标签而来的,在 JavaScript 的加持下,Canvas 就像一块神奇的画布,可以画你喜欢的东西。
Canvas 内部集成了丰富的 API,可以支持你更加简单、快捷地画出你喜欢的东西。
例如像下面这样的火焰特效、转动的 pizza、瀑布特效。
最佳实践
comming soon……
功能与解释
Canvas 的坐标系
在开始用 Canvas 进行绘画之前,我们需要了解 Canvas 的坐标系,它与我们 Scratch 的坐标系略有不同。
Scratch 坐标系如下图所示:
Canvas 的坐标系原点在左上角,也就是(0,0)。Canvas 长 480 像素,宽 360 像素。如下图所示:
如果对 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 |
下图为贝塞尔曲线原理图示意,蓝色为起点和终点,红色为控制点。
使用如下这段代码,就可以得到一个粉色的爱心。
绘制文字
可以从指定位置开始绘制文字
属性 | 描述 | 示例参数 |
文字内容 | 要绘制的文字内容 | 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 |
画线到点
可以让画笔画线到指定位置
属性 | 描述 | 示例参数 |
坐标数值 | 点 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.基础绘制语句 |