1、绘制矩形
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>canvas绘制矩形</title>
<style>
canvas{
border: 1px solid black;
}
</style>
<script>
window.onload = function(){
//从DOM上得到画布对象的句柄
var canvas = document.getElementById("canvas1");
//请求画布提供一个可供绘制的上下文(context),在这里请求2D上下文,赋给context变量
var context = canvas.getContext("2d");
//定义画布的填充颜色,如省略此句代码,则默认为黑色。
context.fillStyle = "red";
//调用画布填充矩形的方法。
context.fillRect(50,50,60,100);
};
</script>
</head>
<body>
<canvas id="canvas1" width="600" height="300"></canvas>
</body>
</html>
效果如下:
方法详解:
context.fillRect(x,y,width,height);
其中(x,y)是矩形的起点的坐标,width,height分别定义矩形的宽和高。
2、绘制三角形
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>canvas描绘三角形</title>
<style>
canvas{
border: 1px solid black;
}
</style>
<script>
window.onload = function(){
//从DOM上得到画布对象的句柄
var canvas = document.getElementById("canvas2");
//请求画布提供一个可供绘制的上下文(context),在这里请求2D上下文,赋给context变量
var context = canvas.getContext("2d");
//使用beginPath方法告诉画布要开始一个新路径
context.beginPath();
//定义路径的起点
context.moveTo(100,150);
//lineTo方法描路径,从起点描到(250,75)
context.lineTo(250,75);
//从(250,75)描到(125,30)
context.lineTo(125,30);
//用closePath方法闭合路径
context.closePath();
//设置线宽在路径上画线
context.lineWidth = 5;
//用线描路径
context.stroke();
//设置颜色来用红色填充三角形
context.fillStyle = "red";
//用红色填充三角形
context.fill();
};
</script>
</head>
<body>
<canvas id="canvas2" width="600" height="300"></canvas>
</body>
</html>
效果如下:
3、绘制圆形
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>canvas绘制圆形</title>
<style>
canvas{
border: 1px solid black;
}
</style>
<script>
window.onload = function(){
//从DOM上得到画布对象的句柄
var canvas = document.getElementById("canvas3");
//请求画布提供一个可供绘制的上下文(context),在这里请求2D上下文,赋给context变量
var context = canvas.getContext("2d");
//使用beginPath方法告诉画布要开始一个新路径
context.beginPath();
//绘制圆形的方法
context.arc(150,150,50,0,2*Math.PI,true);
//设置线宽在路径上画线
context.lineWidth = 5;
//用线描路径
context.stroke();
//设置填充颜色为浅蓝色
context.fillStyle = "lightblue";
//填充颜色
context.fill();
};
</script>
</head>
<body>
<canvas id="canvas3" width="600" height="300"></canvas>
</body>
</html>
效果如下:
方法详解:
context.arc(x,y,radius,startAngle,endAngle,direction);
x,y:确定圆心在画布上的坐标;
radius:定义圆的半径;
startAngle,endAngle:弧的起始角和终止角确定了路径在圆上的起点和终点;
direction:角可以按照逆时针度量(角度是负的,如”-45°“),也可以按照顺时针度量(角度是正的,如”45°“),如果direction为true,就逆时针画弧,如果direction为false,就顺时针画弧。
degreesToRadians(degrees)方法详解:
在画布中,角的单位都用弧度表示,而不是度,因此定义degreesToRadians(degrees)方法,将角度转换为弧度。
function degreesToRadians(degrees){
return (degrees * Math.PI)/180;
}
因此,在上边绘制圆形的例子中,context.arc(150,150,50,0,2*Math.PI,true);
也可以表示为context.arc(150,150,50,0,degreesToRadians(360),true);
4、一个例子
为了在画布上实现如下效果:
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="smileface.js"></script>
<title>绘制一个笑脸</title>
<style>
canvas{
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="smilecanvas" width="600" height="550"></canvas>
</body>
</html>
smileface.js文件:
window.onload = function(){
drawSmileFace();
};
function drawSmileFace(){
var canvas = document.getElementById("smilecanvas");
var context = canvas.getContext("2d");
//这是圆脸
context.beginPath();
context.arc(300,300,200,0,degreesToRadians(360),true);
context.fillStyle = "#ffffcc";
context.fill();
context.stroke();
//这是左眼
context.beginPath();
context.arc(200,250,25,0,degreesToRadians(360),true);
context.stroke();
//这是右眼
context.beginPath();
context.arc(400,250,25,0,degreesToRadians(360),true);
context.stroke();
//这是鼻子
context.beginPath();
context.moveTo(300,300);
context.lineTo(300,350);
context.stroke();
//这是嘴巴
context.beginPath();
context.arc(300,350,75,degreesToRadians(20),degreesToRadians(160),false);
context.stroke();
}
function degreesToRadians(degrees){
return (degrees * Math.PI)/180;
}