目录
一、使用案例
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)
实现效果:绘制出一个矩形
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)
实现效果:同样绘制出一个矩形
注:Canvas的宽高需要通过属性来设置,尽量不要使用CSS来设置。
二、相关资料
1、API教程文档
学习 HTML5 Canvas 这一篇文章就够了 | 菜鸟教程
2、炫酷案例
超多经典 canvas 实例,动态离子背景、移动炫彩小球、贪吃蛇、坦克大战、是男人就下100层、心形文字等等等 - 简书