现在开始正式学习2D上下文
2D上下文
2D上下文坐标原点的canvas元素的左上角
填充和描边
大部分2D上下文细分为填充和描边,属性为fillStyle和strokeStyle。
context.strokeStyle = "#0000ff";
context.fillStyle = "blue";
绘制矩形
绘制矩形有三种方法,参数都是x坐标,y坐标,矩形宽高。
fillRect()
fillRect()方法在画布上绘制填充指定颜色的矩形,配合fillStyle使用。
var drawing = document.getElementById('drawing');
// 判断浏览器是否支持canvas元素
if(drawing.getContext){
//获取2D上下文对象
var context = drawing.getContext('2d');
context.fillStyle = 'red';
context.fillRect(10, 10, 50, 50);
context.fillStyle = "rgba(0,0,255,0.5)"
context.fillRect(30, 30, 50, 50)
strokeRect()
strokeRect()绘制指定颜色描边的矩形
var drawing = document.getElementById('drawing');
// 判断浏览器是否支持canvas元素
if(drawing.getContext){
//获取2D上下文对象
var context = drawing.getContext('2d');
context.strokeStyle = 'red';
context.strokeRect(10, 10, 50, 50);
context.strokeStyle = 'rgba(0,255,0,0.8)';
context.strokeRect(20,20,50,50);
}
clearRect()
clearRect()方法用于清除画布上的矩形区域,本质上是把某一矩形区域变透明,在进行绘图。
var drawing = document.getElementById('drawing');
// 判断浏览器是否支持canvas元素
if(drawing.getContext){
//获取2D上下文对象
var context = drawing.getContext('2d');
context.fillStyle = 'red';
context.fillRect(10, 10, 100, 100);
context.fillStyle = 'rgba(0,0,255,0.8)';
context.fillRect(50, 50, 100, 100);
// 接下来使用clearRect()方法来实现效果
context.clearRect(25, 25, 20, 20);
context.clearRect(70, 70, 20, 20);
}
绘制路径
绘制路径必须调用beginPath()方法,表示开始绘制新路径。
以下是实际绘制路径的方法和代码
arc(x,y,radius,startAngle,endAngle,counterclockwise)
参数分别是:x坐标,y坐标,半径,开始角度,结束角度,是否逆时针
var drawing = document.getElementById('drawing');
if(drawing.getContext){
var context = drawing.getContext('2d');
context.beginPath();
context.arc(100,100,99,0,2*Math.PI);
// 描边必须使用stroke()
context.strokeStyle = 'red';
context.stroke();
// 填充需要使用fill()
context.fillStyle = 'yellow';
context.fill();
}
arcTo(x1,y1,x2,y2,radius)
《javascript高级程序设计》这样描述:从上一点开始绘制一条曲线,到(x,y)为止,并以给定半径radius穿过(x1,y1)。然