使用 getContext() 方法加载 Context2D 图形库:
创建画布后,需要做的就是建立一个绘图环境,Context2D 是一个丰富的图形函数库,通过它可以高效灵活的控制 canvas 图像
javascript 代码
var cvs = document.getElementById("cvs"); // cvs 是 canvas 标签的 id
var pro = cvs.getContext("2d"); // 加载 Context2D 库,创建 canvas 环境变量
其中,变量 pro 为实例化的 Context2D 对象。
Context2D 对象有一些基本的属性和方法,下面列出几个基本方法和一个例子:
方法:
【1】beginPath() // 开始一个新路径。通过此方法声明一条线段或曲线的开始。
【2】moveTo(x, y) // 相当于绘画的 “落笔”, 将画笔聚焦到参数声明的坐标上
【3】lineTo(x, y) // 从 moveTo 的坐标 到 lineTo 的坐标添加一条直线路径
【4】quadraticCurveTo() // 同上,添加一条 “贝塞尔曲线”路径
【5】stroke() // 沿添加的路径绘制直线或曲线
【6】closePath() // 关闭路径,结束路径绘制
属性:
【1】 globalAlpha 设置画布的透明度,0.0 到 1.0 之间
【2】 strokeStyle 主要用来设置线性元素的颜色
javascript 代码
pro.beginPath();
pro.moveTo(20,0);
pro.quadraticCurveTo(20, 50, 70, 80);
pro.strokeStyle = "red";
pro.globalAlpha = 0.8;
pro.stroke();
pro.closePath()
这就是一个完整的 canvas 绘制过程,通过动态调整Context2D方法参数,可以做出绚丽的特效。