1. canvas元素用于在网页上绘制图形。
2. 什么是Canvas?
2.1. html5的canvas元素使用JavaScript在网页上绘制图像。
2.2. 画布是一个矩形区域, 您可以控制其每一像素。
2.3. canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
3. Canvas对象的属性
3.1. height属性: 画布的高度。和一幅图像一样, 这个属性可以指定为一个整数像素值或者是窗口高度的百分比。当这个值改变的时候, 在该画布上已经完成的任何绘图都会擦除掉。默认值是150px。
3.2. width属性: 画布的宽度。和一幅图像一样, 这个属性可以指定为一个整数像素值或者是窗口宽度的百分比。当这个值改变的时候, 在该画布上已经完成的任何绘图都会擦除掉。默认值是300px。
4. 创建Canvas元素
4.1. 向html5页面添加canvas元素。
4.2. 规定元素的id、宽度和高度:
<canvas id="myCanvas" width="200px" height="100px"></canvas>
5. 通过JavaScript来绘制
5.1. canvas元素本身是没有绘图能力的。所有的绘制工作必须在JavaScript内部完成:
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>
5.2. JavaScript使用id来寻找canvas元素:
var c=document.getElementById("myCanvas");
5.3. 然后, 创建 CanvasRenderingContext2D对象:
var cxt=c.getContext("2d");
5.3.1. getContext("2d")对象是内建的html5对象, 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
5.4. 下面的两行代码绘制一个红色的矩形:
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
5.5. fillStyle方法将其染成红色, fillRect方法规定了形状、位置和尺寸。
6. 理解坐标
6.1. 上面的fillRect方法拥有参数(0,0,150,75)。
6.2. 意思是: 在画布上绘制150x75的矩形, 从左上角开始(0,0)。
6.3. 如下图所示, 画布的X和Y坐标用于在画布上对绘画进行定位。
7.Canvas画矩形
7.1.代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>矩形</title>
</head>
<body>
<canvas id="myCanvas">your browser does not support the canvas tag </canvas>
<script type="text/javascript">
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,180,100);
</script>
</body>
</html>
7.2.效果图
8.Canvas画线条
8.1.代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>线条</title>
</head>
<body>
<canvas id="myCanvas" width="200px" height="100px" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();
</script>
</body>
</html>
8.2.效果图
9. Canvas画圆形
9.1. 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>圆形</title>
</head>
<body>
<canvas id="myCanvas" width="200px" height="100px" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
</script>
</body>
</html>
9.2. 效果图
10. Canvas画渐变
10.1. 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>渐变</title>
</head>
<body>
<canvas id="myCanvas" width="200px" height="100px" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,200,100);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#0000FF");
cxt.fillStyle=grd;
cxt.fillRect(0,0,200,100);
</script>
</body>
</html>
10.2.效果图
11. Canvas画图片
11.1. 画图片有两个API
drawImage(image, x, y, imgWidth, imgHeight)
drawImage(image, imgX, imgY, imgWidth, imgHeight, destX, destY, destWidth, destHeight)
11.2. 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>图片</title>
</head>
<body>
原图: 宽: 140px, 高:122px<img src="button.png" /><br /><br />
<canvas id="myCanvas" width="600px" height="600px" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var img = new Image();
img.src = 'button.png';
// 图片异步加载, onload回调函数当图片加载完成时执行。
img.onload = function(){
// drawImage(image, x, y, imgWidth, imgHeight)
ctx.drawImage(img, 0, 0);
ctx.drawImage(img, 200, 0);
ctx.drawImage(img, 0, 200, 140, 122);
ctx.drawImage(img, 200, 200, 140, 61);
ctx.drawImage(img, 400, 200, 70, 122);
// drawImage(image, imgX, imgY, imgWidth, imgHeight, destX, destY, destWidth, destHeight)
ctx.drawImage(img, 0, 0, 140, 122, 0, 400, 140, 122);
ctx.drawImage(img, 0, 0, 140, 61, 200, 400, 140, 61);
ctx.drawImage(img, 0, 61, 140, 61, 400, 400, 140, 61);
};
</script>
</body>
</html>
11.3. 效果图