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