您的位置：首页 > 其它

canvas绘制矩形、三角形、圆形

2017-12-07 13:54 323 查看
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;
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航