Canvas元素介绍
- canvas元素是HTML5中新增的一个用于绘图的重要元素。在页面中增加一个canvas元素就相当于在网页中添加一块画布，之后就可以利用一系列的绘图指令，在“画布”上绘制图形。
- 在网页上使用canvas元素时，它会创建一块矩形区域。用户可以自定义具体的大小或者设置canvas元素的其他特性。
- 在页面中加人了canvas元素后，可以通过Javascript来控制画布。可以在其中添加图片、线条以及文字，也可以在里面进行绘图设置，还可以加入高级动画。
Canvas元素的定义语法
<canvas id="xxx" height=… width=…>…</canvas>
说明：
- id，canvas元素的标识id
- height，画布高度，单位为像素
- width，画布宽度，单位为像素
<canvas></canvas>之间指定当浏览器不支持canvas时显示的字符串
在网页中创建canvas画布
<canvas id="mycanvas" height=600 width=400>
您的浏览器不支持 canvas。
</canvas>
在Chrome等支持HTML5的浏览器创建一个空画布，什么都不显示。ie8以下会显示您的浏览器不支持 canvas。
使用JavaScript获取网页中的canvas对象
在JavaScript中，可以使用document.getElementById()方法获取网页中指定id值的对象：
document.getElementById(元素的id属性)
获取id属性值为mycanvas对象的代码如下：
<script type="text/javascript">
var c=document.getElementById("mycanvas");
</script>
得到的对象c即为mycanvas对象。
要在其中绘图还需要获得mycanvas对象的2d渲染上下文（canvasRenderingContext2D）对象：
var ctx=c.getContext("2d");
Canvas坐标系
- canvas元素构建的画布，是一个基于二维(x,y)的网格。
- 坐标原点(0,0)位于canvas的左上角。
- 从原点延x轴从左到右，取值依次递增。从原点延y轴从上到下，取值依次递增。
绘制图形
绘制直线
在网页中使用canvas元素定义一个canvas画布，用于绘画
<canvas id="mycanvas" height=… width=…>...</canvas>
使用JavaScript获取网页中的canvas对象，并获取canvas对象的2d上下文
var ctx = document.getElementById("mycanvas").getContext("2d");
调用beginPath()方法，指示开始创建路径
ctx.beginPath();
调用moveTo(x, y)方法，将坐标移至起点(x,y)
ctx.moveTo(x，y);
调用lineTo(x, y)方法，创建直线至点(x,y)的路径
ctx.lineTo(x，y);
调用stroke()方法，绘制路径
ctx.stroke();
画直线
- 画一条起点为(10, 10)、终点为(50, 50)的直线。
<canvas id="mycanvas" height=100 width=100>您的浏览器不支持 canvas。</canvas>
<script type="text/javascript">
function drawline()
{
var c=document.getElementById("mycanvas"); // 获取网页中的canvas对象
var ctx=c.getContext("2d"); //获取canvas对象的上下文（2d绘图环境）
ctx.beginPath(); // 开始创建路径
ctx.moveTo(10,10); // 创建路径的起点
ctx.lineTo(50,50); // 添加路径中的一个点
ctx.stroke(); // 绘制路径
}
window.addEventListener("load", drawline, false);//页面加载时触发drawline函数画直线
</script>
画三角形
- 使用连续画线的方法绘制一个三角形
<canvas id="mycanvas" height=100 width=100>您的浏览器不支持 canvas。</canvas>
<script type="text/javascript">
function drawtriangle()
{
var c=document.getElementById("mycanvas"); // 获取网页中的canvas对象
var ctx=c.getContext("2d"); //获取canvas对象的2d上下文
ctx.beginPath(); // 开始创建路径
ctx.moveTo(10,10); // 将坐标移至路径起点
ctx.lineTo(10,100); // 向路径中添加一个点
ctx.lineTo(100,100); // 向路径中添加一个点
ctx.lineTo(10,10); // 向路径中添加一个点
ctx.stroke(); // 绘制路径
}
window.addEventListener("load", drawtriangle, true);//页面加载时触发drawtriangle函数画三角形
</script>
绘制矩形
使用rect()方法绘制矩形路径
<canvas id="mycanvas" height=500 width=500>您的浏览器不支持 canvas。</canvas>
<script type="text/javascript">
function drawRect()
{
var c=document.getElementById("mycanvas"); // 获取网页中的canvas对象
var ctx=c.getContext("2d"); //获取canvas对象的2d上下文
ctx.beginPath(); // 开始创建路径
ctx.rect(20,20, 100, 50); // 创建左上顶点为(20, 20)、长100、宽50的矩形路径
ctx.stroke(); //绘制路径
}
window.addEventListener("load", drawRect, true); //页面加载时调用drawRect函数画矩形
</script>
使用strokeRect()方法绘制矩形路径
- 不需要使用beginPath()和stroke()即可绘制矩形边框
<canvas id="mycanvas" height=500 width=500>您的浏览器不支持 canvas。</canvas>
<script type="text/javascript">
function drawRect()
{
var c=document.getElementById("mycanvas"); // 获取网页中的canvas对象
var ctx=c.getContext("2d"); //获取canvas对象的2d上下文
//ctx.beginPath(); // 开始创建路径
//ctx.rect(20,20, 100, 50); // 创建左上顶点为(20, 20)、长100、宽50的矩形路径
ctx. strokeRect(20,20, 100, 50);
//ctx.stroke(); //绘制路径
}
window.addEventListener("load", drawRect, true); //页面加载时调用drawRect函数画矩形
</script>
使用fillRect()方法填充矩形
- 不需要使用beginPath()和stroke()即可绘制矩形填充
<canvas id="mycanvas" height=500 width=500>您的浏览器不支持 canvas。</canvas>
<script type="text/javascript">
function drawRect()
{
var c=document.getElementById("mycanvas"); // 获取网页中的canvas对象
var ctx=c.getContext("2d"); //获取canvas对象的2d上下文
//ctx.beginPath(); // 开始创建路径
ctx. fillRect(20,20, 100, 50);
//ctx.stroke(); //绘制路径
}
window.addEventListener("load", drawRect, true); //页面加载时调用drawRect函数画矩形
</script>
使用clearRect()方法清除矩形
<canvas id="mycanvas" height=500 width=500>您的浏览器不支持 canvas。</canvas>
<script type="text/javascript">
function drawRect()
{
var c=document.getElementById("mycanvas"); // 获取网页中的canvas对象
var ctx=c.getContext("2d"); //获取canvas对象的2d上下文
ctx. fillRect(20,20, 100, 50);
ctx.clearRect(40,40, 60, 10);
}
window.addEventListener("load", drawRect, true); //页面加载时调用drawRect函数画矩形
</script>
绘制圆弧
arc(x, y, radius, startingAngle, endingAngle, antiClockwise);
使用arc()方法仅仅是创建圆弧路径，如需绘制路径要再使用strock()方法
使用arc()方法绘制圆弧
<canvas id="mycanvas" height=500 width=500>您的浏览器不支持 canvas。</canvas>
<script type="text/javascript">
function drawArc()
{
var c=document.getElementById("mycanvas"); // 获取网页中的canvas对象
var ctx=c.getContext("2d"); //获取canvas对象的上下文（2d绘图环境）
ctx.beginPath(); // 开始创建路径
ctx.arc(50, 50, 30, 1.1 * Math.PI, 1.9 * Math.PI, false);
ctx.stroke(); // 绘制路径
}
window.addEventListener("load", drawArc, true);
</script>
使用arc()方法画圆
<canvas id="mycanvas" height=500 width=500>您的浏览器不支持 canvas。</canvas>
<script type="text/javascript">
function drawArc()
{
var c=document.getElementById("mycanvas"); // 获取网页中的canvas对象
var ctx=c.getContext("2d"); //获取canvas对象的上下文（2d绘图环境）
ctx.beginPath(); // 开始创建路径
ctx.arc(50, 50, 30, 0, 2 * Math.PI, false);
ctx.stroke(); // 绘制路径
}
window.addEventListener("load", drawArc, true);
</script>
小结：
- 路径path（仅有路径是不会有任何显示效果的）
- 描边stroke（绘制路径/绘制路径的轮廓）
- 填充fill（绘制路径内部）
描边
- 指定描边的颜色和宽度
通过设置canvasRenderingContext2D对象的以下属性指定描边的颜色和描边的宽度。
<canvas id="mycanvas" height=500 width=500>您的浏览器不支持 canvas。</canvas>
<script type="text/javascript">
function strokeColorAndWidth()
{
var c=document.getElementById("mycanvas"); // 获取网页中的canvas对象
var ctx=c.getContext("2d"); //获取canvas对象的上下文（2d绘图环境）
ctx.lineWidth = 5;
ctx.strokeStyle = "red";
ctx.beginPath(); // 开始创建路径
ctx.moveTo(10,10); // 创建路径的起点
ctx.lineTo(100,100); // 添加路径中的一个点
ctx.stroke(); //绘制路径
ctx.strokeStyle = "yellow";
ctx.strokeRect(25,25, 80, 60); //矩形
ctx.strokeStyle = "blue";
ctx.beginPath(); // 开始创建路径
ctx.arc(100, 70, 40, 0, 2 * Math.PI, false); //圆形
ctx.stroke(); //绘制路径
}
window.addEventListener("load", strokeColorAndWidth, true);
</script>
- 指定如何绘制线段的末端
通过设置canvasRenderingContext2D对象的lineCap属性可以指定线段的末端如何绘制
lineCap 属性只有绘制较宽线段时才有效
ctx.lineWidth = 20;
ctx.strokeStyle = "red";
ctx.lineCap = "butt";
ctx.beginPath();
ctx.moveTo(10,10);
ctx.lineTo(80,10);
ctx.stroke();
ctx.lineCap = "round";
ctx.beginPath();
ctx.moveTo(10,40);
ctx.lineTo(80,40);
ctx.stroke();
ctx.lineCap = "square";
ctx.beginPath();
ctx.moveTo(10,70);
ctx.lineTo(80,70);
ctx.stroke();
- 指定如何绘制交点
lineJoin属性只有绘制较宽边框的图形时才有效
<canvas id="mycanvas" height=500 width=500>您的浏览器不支持 canvas。</canvas>
<script type="text/javascript">
function draw()
{
var c=document.getElementById("mycanvas");
var ctx=c.getContext("2d");
ctx.lineWidth = 20;
ctx.strokeStyle = "red";
ctx.lineJoin = "miter";
ctx.strokeRect(10,10, 60, 40);
ctx.lineJoin = "round";
ctx.strokeRect(100,10, 60, 40);
ctx.lineJoin = "bevel";
ctx.strokeRect(200,10,60, 40);
}
window.addEventListener("load", draw, true);
</script>
填充图形内部
fillStyle 属性可以指定填充图形内部的颜色
<canvas id="mycanvas" height=500 width=500>您的浏览器不支持 canvas。</canvas>
<script type="text/javascript">
function draw()
{
var c=document.getElementById("mycanvas");
var ctx=c.getContext("2d");
ctx.fillStyle = "yellow";
ctx.fillRect(10,10, 60, 60);
ctx.beginPath();
ctx.arc(120, 40, 30, 0, 2 * Math.PI, false);
ctx.stroke();
ctx.fill();
}
window.addEventListener("load", draw, true);
</script>
绘制图像—drawImage()
绘制图像（仅指定绘图位置）：
drawImage(image, x, y)
绘制缩放图像（指定图像的宽、高）：
drawImage(image, x, y, width, height)
绘制剪切图像（指定被剪切的部分）：
drawImage(image, sX, sY, sW, sH, x, y, width, height)
用图像的默认大小绘图：
var imageObj = new Image(); // 创建图像对象
imageObj.src = "moon.jpg";
imageObj.onload = function(){//图像加载时(onload)触发函数
ctx.drawImage(imageObj, 100, 100);
缩放图（指定图像的大小），绘制图像的函数更新为：
ctx.drawImage(imageObj, 100, 100,100,70);
剪切图像，绘制图像的函数更新为：
ctx.drawImage(imageObj, 127,133, 80,70, 100,100, 240,210);
绘制文字
<canvas id="myCanvas" height=500 width=500>您的浏览器不支持 canvas。</canvas>
<script type="text/javascript">
function drawText()
{
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font = "60px 宋体";
ctx.textAlign = "left";
ctx.strokeStyle = "blue";//笔触蓝色
ctx.strokeText("中国", 210, 210);
}
图形的操作
ctx.fillStyle = 'red';
ctx.fillRect(0,0,150,150); // 使用红色填充矩形
ctx.save(); // 保存当前的绘图状态
ctx.fillStyle = 'green';
ctx.fillRect(15,15,120,120); // 使用绿色填充矩形
ctx.save(); // 保存当前的绘图状态
ctx.fillStyle = 'blue' ;
ctx.fillRect(30,30,90,90); //使用蓝色填充矩形
ctx.restore(); // 恢复之前保存的绘图状态，即ctx.fillStyle = 'green'
ctx.fillRect(45,45,60,60); //使用绿色填充矩形
ctx.restore(); // 恢复再之前保存的绘图状态，即ctx.fillStyle = 'red'
ctx.fillRect(60,60,30,30); // 使用红色填充矩形
平移
通过对默认的坐标系进行坐标变换处理，可以实现图形旋转、移位等效果。
坐标平移通过translate(x, y)方法来实现。
ctx.fillRect(0,0,100,100);
ctx.translate(100,100);
ctx.fillRect(0,0,100,100);
旋转
rotate(angle)
angle是指旋转的角度，旋转的中心点是坐标轴原点。正数表示顺时针方向进行旋转，负数表示逆时针旋转。
ctx.fillRect(100,0,40,10);
ctx.rotate(Math.PI/4);
ctx.fillRect(100,0,40,10);
缩放
scale(x,y);
x是水平方向的放大倍数，y是垂直方向的放大倍数。
将图形缩小的时候，将这两个参数设置为0到1之间的小数就可以了，例如0.5是指将图形缩小一半。
ctx.fillRect(0,0,80,40); //绘制第一个矩形
ctx.scale(2,2); //设置坐标放大
ctx.fillRect(40,20,80,40); //绘制第二个矩形
ctx.scale(0.5,0.5); //设置坐标缩小
ctx.fillRect(240,120,80,40); //绘制第三个矩形
综合利用坐标变换绘制变形的图形。
本例中首先平移坐标原点至(200,200)，然后在循环中不断缩小和旋转坐标系并绘制同一个矩形。
ctx.translate(200,200); //平移坐标系
for(var i = 0; i < 50; i++)
{
ctx.scale(0.95,0.95); //缩小坐标系
ctx.rotate(Math.PI / 10); //旋转坐标系
//绘制矩形
ctx.beginPath();
ctx.rect(0,0,100,50);
ctx.fill();
ctx.stroke();
}
组合图形
- 在绘制图形时，如果画布上已经有图形，就涉及到一个问题：两个图形如何组合。
- 可以通过CanvasRenderingContext2D.globalCompositeOperation属性来设置组合方式 。
- 不同浏览器支持的情况有所不同。
var ctx = document.getElementById("myCanvas").getContext("2d");
ctx.globalCompositeOperation = "destination-atop"; //设置两个图形组合方式
//先画黄色矩形
ctx.fillStyle = "yellow";
ctx.fillRect(30,30,100,100);
//再画蓝色圆形
ctx.fillStyle = "blue";
ctx.beginPath();
ctx.arc(130,130,50,0,Math.PI*2,false);
ctx.fill();
绘制阴影
如果你动手实践了上面的小例子，可以适当做题巩固一下哦
Canvas绘制线条时用下面哪个方法设置起点坐标：( )
A．lineTo B．moveTo
C．startTo D．beginTo
以下不是canvas的方法是：( )
A．getContext() B．fill()
C．stroke() D．controller()
在canvas中可以使用_______方法画圆。
在canvas中可以使用_______方法画矩形边框。
画矩形。写出标签及相应的javaScript代码。要求：
- 画布的宽和高分别为500、500像素。
- 矩形的边框的宽为20px，边框为红色、填充黄色。
- 矩形的宽和高分别为300、200像素，位于画布左上角30、30位置。
再学着写几个小练习，你的canvas就入门了哦
- 画一个正六边形
思路提示：一个六边形是由六根直线组合的，那么可以通过计算坐标，把直线连接起来，就是六条直线合起来的正六边形啦
源码如下：
<canvas id="mycanvas" height=500 width=500>您的浏览器不支持 canvas。</canvas>
<script type="text/javascript">
function drawline()
{
var c=document.getElementById("mycanvas"); // 获取网页中的canvas对象
var ctx=c.getContext("2d"); //获取canvas对象的上下文（2d绘图环境）
ctx.lineWidth = 10;
ctx.strokeStyle = "red";
ctx.beginPath(); // 开始创建路径
ctx.moveTo(80,80); // 创建路径的起点
ctx.lineTo(160,80); // 添加路径中的一个点
ctx.stroke(); // 绘制路径
ctx.moveTo(156,80); // 创建路径的起点
ctx.lineTo(196,149.5); // 添加路径中的一个点
ctx.stroke(); // 绘制路径
ctx.moveTo(196,147); // 创建路径的起点
ctx.lineTo(156,219); // 添加路径中的一个点
ctx.stroke(); // 绘制路径
ctx.moveTo(160,219); // 创建路径的起点
ctx.lineTo(80,219); // 添加路径中的一个点
ctx.stroke(); // 绘制路径
ctx.moveTo(84,219); // 创建路径的起点
ctx.lineTo(44,147); // 添加路径中的一个点
ctx.stroke(); // 绘制路径
ctx.moveTo(44,149.5); // 创建路径的起点
ctx.lineTo(84,80); // 添加路径中的一个点
ctx.stroke(); // 绘制路径
}
window.addEventListener("load", drawline, false);//页面加载时触发drawline函数画直线
</script>
- 画一个笑脸
是不是很有趣呢？
源码如下，可以尝试去敲打一遍，改一改，试着弄出很多搞笑的表情吧~~~
<canvas id="mycanvas" height=500 width=500>您的浏览器不支持 canvas。</canvas>
<script type="text/javascript">
function drawArc()
{
var c=document.getElementById("mycanvas"); // 获取网页中的canvas对象
var ctx=c.getContext("2d"); //获取canvas对象的上下文（2d绘图环境）
ctx.beginPath(); // 开始创建路径
ctx.arc(250, 250, 100, 0, 2 * Math.PI, false);
ctx.fillStyle = "yellow";
ctx.fill();
ctx.stroke(); // 绘制路径
ctx.beginPath(); // 开始创建路径
ctx.arc(200, 200, 10, 0, 2 * Math.PI, false);
ctx.fillStyle = "gray";
ctx.fill();
ctx.stroke(); // 绘制路径
ctx.beginPath(); // 开始创建路径
ctx.arc(300, 200, 10, 0, 2 * Math.PI, false);
ctx.fillStyle = "gray";
ctx.fill();
ctx.stroke(); // 绘制路径
ctx.beginPath(); // 开始创建路径
ctx.arc(250, 280, 40,0.8* Math.PI, 0.2* Math.PI, true);
ctx.stroke(); // 绘制路径
}
window.addEventListener("load", drawArc, true);
</script>
原创文章 271
获赞 116
访问量 4万+