canvas 初探 api 整理 I
canvas API 整理 I
canvas
canvas 的默认大小为300像素×150像素（宽×高，像素的单位是px）
<canvas id="main" width="150" height="150"></canvas>
由于某些较老的浏览器（尤其是IE9之前的IE浏览器）或者文本浏览器不支持HTML元素"canvas"，在这些浏览器上你应该总是能展示替代内容。
我们只是在<canvas>标签中提供了替换内容。支持<canvas>的浏览器将会忽略在容器中包含的内容，并且只是正常渲染canvas。
举个例子，我们提供对canvas内容的文字描述或者是提供动态生成内容相对应的静态图片，如下所示：
<canvas id="stockGraph" width="150" height="150">
current stock price: $3.15 +0.15
</canvas>
<canvas id="clock" width="150" height="150">
<img src="" width="150" height="150" alt=""/>
</canvas>
注：</canvas> 标签不可省
<canvas> 元素有一个叫做 getContext() 的方法，这个方法是用来获得渲染上下文和它的绘画功能。getContext()只有一个参数，上下文的格式。
var canvas = document.getElementById('id');
var ctx = canvas.getContext('2d');
代码的第一行通过使用 document.getElementById()方法来为<canvas>元素得到DOM对象。一旦有了元素对象，你可以通过使用它的getContext() 方法来访问绘画上下文。
支持性
替换内容是用于在不支持<canvas>标签的浏览器中展示的:
var canvas = document.getElementById('main'); //获取canvas容器
var canWid = canvas.width; //canvas 的宽度
var canHei = canvas.height; //canvas 的高度
if (canvas.getContext){
var ctx = canvas.getContext('2d'); //创建一个画布
// drawing code here
} else {
// canvas-unsupported code here
}
//通过简单的测试getContext()方法的存在，脚本可以检查编程支持性
绘制
- 绘制矩形
//填充矩形（x, y是横纵坐标，原点在canvas的左上角）
ctx.fillRect(x, y, width, height);
//边框矩形，默认1px 黑色。
ctx.strokeRect(x, y, width, height);
//清除指定的矩形区域，变为透明
ctx.clearRect(x, y, width, height); //绘制动态效果时，常用来清除整个画布
demo：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
</html>
<script>
function draw(){
var canvas = document.getElementById('canvas');
if (canvas.getContext){
var ctx = canvas.getContext("2d");
ctx.fillRect(25, 25, 100, 100);
ctx.clearRect(35, 35, 80, 80);
ctx.strokeRect(50, 50, 50, 50);
}
}
draw();
</script>
1.png
- 繪製路勁
//新建路径，beginPath是绘制新图形的开始
ctx.beginPath()
//路径（线）的起点，一般在上面这条命令后执行
ctx.moveTo(x, y)
//线的终点
ctx.lineTo(x, y)
//绘制圆形
ctx.arc(x, y, r, start, end, anticlockwise) //x, y圆心，r半径，start和end是开始和结束角度，anticlockwise 为布尔值 false表示顺时针（默认），true表示逆时针。
//绘制弧线
ctx.arcTo(x1, y1, x2, y2, radius); //当前端点、(x1,y1)和(x2,y2)这三个点连成的弧线，r是半径。
//闭合路径，不是必须的，如果线的终点跟起点一样，会自动闭合。
ctx.closePath()
//通过线条绘制轮廓（边框）
ctx.stroke()
//通过路径填充区域（实心）
ctx.fill()
注：
1.当前路径为空，即调用beginPath()之后，或者canvas刚建的时候，第一条路径构造命令通常被视为是moveTo（），无论最后的是什么。出于这个原因，你几乎总是要在设置路径之后专门指定你的起始位置。
2.fill()和stroke()函数表示绘图结束。如果要继续绘制，需要重新新建路径（beginPath()）。调用fill()函数时，所有没有闭合的形状都会自动闭合，所以你不需要调用closePath()函数。但是调用stroke()时不会自动闭合。
3.arc()函数中的角度单位是弧度，不是度数。角度与弧度的js表达式:radius=(Math.PI/180)*degrees
demo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
</html>
<script>
function draw(){
var canvas = document.getElementById('canvas');
if (canvas.getContext){
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(75,75,50,0,Math.PI*2,true); // 绘制
ctx.moveTo(110,75);
ctx.arc(75,75,35,0,Math.PI,false); // 口(顺时针)
ctx.moveTo(65,65);
ctx.arc(60,65,5,0,Math.PI*2,true); // 左眼
ctx.moveTo(95,65);
ctx.arc(90,65,5,0,Math.PI*2,true); // 右眼
ctx.stroke();
}
}
draw();
</script>
2.png
使用样式和色彩
- 颜色
ctx.fillStyle = 'red' //针对fill()有效的颜色，还可以取值：'#fff'、'rgba(0, 0, 0, 0.5)'等。
ctx.strokeStyle = 'red' //针对stroke()有效的颜色，取值同上。
ctx.globalAlpha = 0.5; //透明度
注：
一旦您设置了 strokeStyle 或者 fillStyle 的值，那么这个新值就会成为新绘制的图形的默认值。如果你要给每个图形上不同的颜色，你需要重新设置 fillStyle 或 strokeStyle 的值。
-
lineCap线段端点显示样子
ctx.lineWidth = 2; //线条宽度
ctx.lineCap = 'butt(默认)'、'round(圆弧)'、'square(方形)' //线段端点显示的样式
-
lineJoin两线段连接处显示样子
ctx.lineJoin = 'miter(默认)'、'round(圆角)'、'bevel(横线)' //两线段连接处所显示的样子
-
setLineDash方法和lineDashOffset属性来制定虚线样
ctx.setLineDash([4, 2]) //设置虚线，参数为数组，第一个值为实现宽度，第二个值为空白的宽度
ctx.lineDashOffset = 0; //虚线起始偏移量
demo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
</html>
<script>
var ctx = document.getElementById('canvas').getContext('2d');
var offset = 0;
function draw() {
ctx.clearRect(0,0, canvas.width, canvas.height);
ctx.setLineDash([4, 2]);
ctx.lineDashOffset = -offset;
ctx.strokeRect(10,10, 100, 100);
}
function march() {
offset++;
if (offset > 16) {
offset = 0;
}
draw();
setTimeout(march, 20);
}
march();
</script>
3.gif
- 渐变
createLinearGradient(x1, y1, x2, y2)
createLinearGradient 方法接受 4 个参数，表示渐变的起点 (x1,y1) 与终点 (x2,y2)。
createRadialGradient(x1, y1, r1, x2, y2, r2)
createRadialGradient 方法接受 6 个参数，前三个定义一个以 (x1,y1) 为原点，半径为 r1 的圆，后三个参数则定义另一个以 (x2,y2) 为原点，半径为 r2 的圆。
创建出 canvasGradient 对象后，我们就可以用 addColorStop 方法给它上色了。
gradient.addColorStop(position, color)
addColorStop 方法接受 2 个参数，position 参数必须是一个 0.0 与 1.0 之间的数值，表示渐变中颜色所在的相对位置。例如，0.5 表示颜色会出现在正中间。color 参数必须是一个有效的 CSS 颜色值（如 #FFF， rgba(0,0,0,1)，等等）
var bg = ctx.createLinearGradient(x1, y1, x2, y2); //定义线性渐变，渐变的起点 (x1,y1) 与终点 (x2,y2)。
var bg1 = ctx.createRadialGradient(50, 50, 0, 50, 50, 100); //定义径向渐变
bg.addColorStop(0, 'red'); //定义好，之后开始上色
bg.addColorStop(0.5, 'blue');
bg.addColorStop(1, 'rgba(0, 0, 0, 0.6)');
- 图案
var img = new Image();
img.src= './images/background.jpg';
ctx.drawImage(img, 0, 0); //img为图像，(0, 0)为起始坐标
ctx.drawImage(img, 0, 0, w, h); //w、h指定图片的宽高，则会同比例缩放。
- 文字
var ctx = document.getElementById('canvas').getContext('2d');
ctx.shadowOffsetX = 2; //X轴阴影距离，负值表示往上，正值表示往下
ctx.shadowOffsetY = 2; //Y轴阴影距离，负值表示往左，正值表示往右
ctx.shadowBlur = 2; //阴影的模糊程度
ctx.shadowColor = "rgba(0, 0, 0, 0.5)"; //阴影颜色
ctx.font = "30px Times New Roman"; //设置字体和字体大小
ctx.textAlign = 'center'; //start, end, left, right or center
ctx.textBaseline = 'middle' //top, hanging, middle, alphabetic, ideographic, bottom
ctx.direction = 'inherit' //ltr, rtl, inherit
ctx.fillStyle = "Black";
ctx.fillText("Sample String", 15, 30); //实体文字
ctx.strokeStyle = 'red';
ctx.strokeText('Hello world', 15, 100); //边框文字
