Canvas绘图
使用Canvas绘图
- 自己的一些理解和注意点:
- 1、目的:能“替代”flash等其他用于做动画或者游戏的插件的一个标签,可以减小页面结构,让页面加载速度更快
- 2、canvas可以理解为一个div,只不过div是用来存放元素的,canvas则提供了一个绘制图形的区域
- 3、canvas标签习惯上在标签内部对其
大小
进行设置(其他样式还是该怎样写怎样写还是用css),而不是css js- 4、canvas标签本身可以认为是一张普通画板,除此之外没有其他功能,
内部的所有内容或者图形要用js脚本来完成
- 5、
画板和画家
:var huaban=document.querySelector(".canvas")
var bicaso=huaban.getContext(“2d”);(getContext() 方法返回一个用于在画布上绘图的环境
)- 6、画家有一个官方称呼:【convas上下文对象,习惯上命名为ctx(context)】
- 7、要用canvas则先要准备一个脚本并且获取到canvas上下文(首先要检测 getContext() 方法是否存在)
- 8、特征:
上屏即像素化(内部绘制的图形一旦完成就不能变更,相当于已经是像素了只能擦掉重新画)- 9、
fps:
frame per second(每秒钟多少帧)(就像ps时间轴中的帧动画)- 10、如果canvas要加载一个图片,
必须先等到图片load完再上屏
,这与画家画油画感觉很像,先要看到整个物体,而不是像3D打印机过到哪画到哪
细致的基本用法
2D上下文(与python的使用turtle库画图类比)
- 填充和描边
fillStyle
:填充strokeStyle
:描边
- 绘制矩形(三个方法都是4个参数)
- fillRect(矩形的 x 坐标、矩形的 y 坐标、矩形
宽度和矩形高度) - strokeRect()
- clearRect()
- fillRect(矩形的 x 坐标、矩形的 y 坐标、矩形
// 绘制红色矩形
context.fillStyle = "#ff0000";
context.fillRect(10, 10, 50, 50);
// 绘制半透明的蓝色矩形
context.fillStyle = "rgba(0,0,255,0.5)";
context.fillRect(30, 30, 50, 50);
// 绘制红色描边矩形
context.strokeStyle = "#ff0000";
context.strokeRect(10, 10, 50, 50);
-
绘制路径(
首先调出beginPath()方法
)- 一些方法如下图: