前端 Canvas 绘画 总结
目次一、使用案例
1、基础使用案例
2、根本案例改为直接JS实现
二、相关资料
1、API教程文档
2、炫酷案例
一、使用案例
1、基础使用案例
使用Canvas的根本步调：
1、必要一个canvas标签
2、必要获取 画笔 对象
3、使用canvas提供的api进行画图
<!-- canvas和其他元素不一样，需要设置属性的方式来设置宽和高，不然会有问题 -->
<canvas width="600" height="400" id="canvas01"></canvas> //1、获取canvas (画布) 标签
const canvas=document.getElementById("canvas01")
//2、获取context (画笔) 对象
const context=canvas.getContext("2d")
//3、画出自己想要的图形
//画一个长方形，有专门的api，fillRect(x,y,width,height)
context.fillRect(100,100,200,200) 实现效果：绘制出一个矩形
https://i-blog.csdnimg.cn/direct/2b9acd517bdd45349d06e46bb07631e9.png
2、根本案例改为直接JS实现
//1、创建canvas (画布)
const canvas=document.createElement("canvas")
//设置宽高
canvas.height=400
canvas.width=600
document.body.append(canvas)
//2、获取context (画笔) 对象
const context=canvas.getContext("2d")
//3、画出自己想要的图形
//画一个长方形，有专门的api，fillRect(x,y,width,height)
context.fillRect(100,100,150,100) 实现效果：同样绘制出一个矩形
https://i-blog.csdnimg.cn/direct/3b7e519471d941a793ac6b71fea4f4c7.png
注：Canvas的宽高必要通过属性来设置，尽量不要使用CSS来设置。
二、相关资料
1、API教程文档
学习 HTML5 Canvas 这一篇文章就够了 | 菜鸟教程
2、炫酷案例
超多经典 canvas 实例，动态离子背景、移动炫彩小球、贪吃蛇、坦克大战、是男人就下100层、心形文字等等等 - 简书
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]