毋庸置疑,这是一个很强大的HTML5的功能哦~不过鉴于鄙人也是菜鸟,这篇文章就算是canvas的入门吧(注意IE8(含)以下不兼容<canvas>元素)。
步入正题(首先给个W3school的demo):
1.我们先新建一个画布(设置id等下js要用,设置画布的宽度和高度):
<canvas id="canvasDemo" width="200" height="100"></canvas>
2.然后我们需要JavaScript出场了:
<script type="text/javascript">
var canvas=document.getElementById("canvasDemo");
var cxt=canvas.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>
我们来简单解释一下:
首先我们通过获取id的方式拿到了画布 var canvas=document.getElementById("canvasDemo");,
然后创建 context 对象:var cxt=canvas.getContext("2d");getContext("2d") 对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法,
然后我们要在画布上画画了:cxt.fillStyle="#FF0000";cxt.fillRect(0,0,150,75);,fillStyle 方法将其染成红色,fillRect 方法规定了形状、位置和尺寸,cxt.fillRect(0,0,150,75)表示从左上角(0,0)处开始画,画的图形的宽度(width)为150px,高度(height)为75px。
注意:JS代码要放在<canvas>标签之后,否则无法正常执行,控制台会出错:
下面是正常的代码:
<!doctype html>
<html>
<head>
<style type="text/css">
canvas{
border:1px solid #333;
}
</style>
</head>
<body>
<canvas id="canvasDemo" width="200" height="100"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvasDemo");
var cxt = canvas.getContext("2d");
cxt.fillStyle = "#FF0000";
cxt.fillRect(0,0,150,75);
</script>
</body>
</html>
演示的效果为:
下面说个画直线的:先直接上源码吧,然后再一步步解释:
<!doctype html>
<html>
<head>
<style type="text/css">
canvas{
border:1px solid #333;
}
</style>
</head>
<body>
<canvas id="canvasDemo" width="200" height="100"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvasDemo");
var cxt = canvas.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,75);
cxt.lineTo(10,50);
cxt.lineTo(30,100);
cxt.stroke();
</script>
</body>
</html>
cxt.moveTo(x,y)方法是定义线条的开始坐标,cxt.lineTo(x,y)方法是定义线条结束坐标。所以源码中cxt.lineTo(150,75);cxt.lineTo(10,50);cxt.lineTo(30,100);就是相当于画了三条直线(图中就是折线了),最后stroke() 方法来绘制线条。
下面是演示的效果:
接着我们来画一个圆:
<!doctype html>
<html>
<head>
<style type="text/css">
canvas{
border:1px solid #333;
}
</style>
</head>
<body>
<canvas id="canvasDemo" width="200" height="100"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvasDemo");
var cxt = canvas.getContext("2d");
cxt.fillStyle = "#FF0000"; //给圆填充颜色
cxt.beginPath();
cxt.arc(100,50,50,0,2*Math.PI);
cxt.closePath();
cxt.fill();
cxt.stroke();
</script>
</body>
</html>
画圆最关键的一个方法:arc(x,y,r,start,stop),我们可以通过start和stop选择画全圆,半圆,1/4圆等;然后通过cxt.beginPath()、cxt.closePath()开始画圆和画圆结束。cxt.fill()是将原内部可填充颜色等属性。cxt.stroke()画出一个圆的轮廓。比如说把cxt.fill()去掉那么圆就没有颜色了只有外部的一个圆的轮廓。如果把cxt.stroke()去掉那我们可以看见一个红色的圆,但是看不见外面的一圈轮廓,有兴趣的同学可以试一下。
下面是演示的效果:
接下来我们在画布中绘制文本:
<!doctype html>
<html>
<head>
<style type="text/css">
canvas{
border:1px solid #333;
}
</style>
</head>
<body>
<canvas id="canvasDemo" width="200" height="100"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvasDemo");
var cxt = canvas.getContext("2d");
cxt.font = "20px Microsoft YaHei"; //定义文本的字体
cxt.fillText("这是一个实心文本",10,30); //在画布上写一个实心的文本,10代表文本left:10px ,30代表文本top:30-20 =10
cxt.strokeText("这是一个空心文本",10,60); //在画布上写一个空心的文本,10代表文本left:10px ,60代表文本top:60-20 =40
</script>
</body>
</html>
下面是演示的效果:
值得注意的是fillText("text",x,y)和stroke("text",x,y),x直接是文本距画布左边距的距离,但是y是距画布top的距离+文本本身的高度。
下面我们在画布中实现渐变效果:
<!doctype html>
<html>
<head>
<style type="text/css">
canvas{
border:1px solid #333;
}
</style>
</head>
<body>
<canvas id="canvasDemo" width="200" height="100"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvasDemo");
var cxt = canvas.getContext("2d");
var color = cxt.createLinearGradient(0,0,200,100); //创建一个线性渐变createLinearGradient(x,y,x1,y1),这是一个从左上角到右下角的一个线性渐变
/*createRadialGradient(x,y,r,x1,y1,r1)可以创建一个径向/圆渐变*/
color.addColorStop(0,"#FF0000"); //渐变开始的颜色
color.addColorStop(1,"#00FF00"); //渐变结束的颜色
cxt.fillStyle = color;
cxt.fillRect(0,0,200,100);
</script>
</body>
</html>
下面是演示的效果: