目录
一、基本用法
二、canvas的使用
1、绘制一个矩形
填充矩形
轮廓矩形
2、清除画布区域
3、绘制一个圆
填充圆
轮廓圆
会移动的圆
4、渐变色绘制
线性渐变
径向渐变
5、绘制线段
绘制一个三角形
6、绘制图片
7、绘制视频
【前端|html5新增特性之画布canvas的使用】8、绘制文本
一、基本用法 1、获取canvas对象——获取画布
通过document.getElementById()等方法取得canvas对象。
var canvas = document.querySelector('canvas');
2、取得上下文(context)——获取画笔
图形上下文是一个封装了很多绘图功能的对象，参数只能是“2d”
var context = canvas.getContext('2d');
3、定义填充样式
实心填充样式：
context.fillStyle='pink';
轮廓样式：
context.strokeStyle = 'pink'4、绘制填充图形
绘制填充图形：
context.fill();
绘制边框图形：
context.stroke();
绘制填充矩形：
//第一个参数是x轴开始位置，第二个参数是y轴开始位置，第三个参数是绘制图形的宽，第四个位置是绘制图形的高
context.fillRect(10,10,100,100)绘制轮廓矩形：
//第一个参数是x轴开始位置，第二个参数是y轴开始位置，第三个参数是绘制图形的宽，第四个位置是绘制图形的高
context.strokeRect(20, 20, 200, 200)二、canvas的使用 1、绘制一个矩形 填充矩形
文章图片
轮廓矩形
文章图片
2、清除画布区域
文章图片
3、绘制一个圆 需要给开始路径 context.beginPath() 和结束路径 context.closePath()
填充圆
文章图片
轮廓圆
文章图片
会移动的圆
文章图片
4、渐变色绘制 线性渐变
沿对角线（左上至右下）方向渐变
文章图片
径向渐变
同心圆渐变
文章图片
5、绘制线段
文章图片
绘制一个三角形
文章图片
6、绘制图片
文章图片
7、绘制视频
8、绘制文本
文章图片
推荐阅读
- 五|猿创征文 | web前端——她
- jQuery|猿创征文 | 使用Jquery封装的AJAX请求数据
- Docker|猿创征文｜Docker网络模型以及容器通信
- 前端|猿创征文 | H5 API之web存储、拖拽事件以及跨文档通信
- Vue|数据代理-Object.defineProperty -Vue中的数据代理
- Vue|事件处理、事件修饰符（详细）
- vue|vue-vue3(4)-计算属性与监视computed，watch，watchEffect
- vue|前端之vue计算属性与监视属性
- 前端|ES6模块化使用_前端培训