canvas是html5中新增加的一个元素,专门用来绘制图形。
1. 创建画布
<script src="canvas.js"></script>引入canvas.js文件
<body onload="draw('canvas');">
<canvas id="canvas" width="500" height="350"></canvas>
</body>
意思是:
先引入canvas.js脚本文件。
然后指定id,创建一个宽500px,高350px。
再在body属性里使用onload="draw('canvas');"
函数进行图形绘画。
2.绘画矩形
html代码:
<body onload="draw('canvas');">
<canvas id="canvas" width="500" height="350"></canvas>
</body>
js代码:
function draw(id){
// 获取canvas的id
var canvas = document.getElementById('canvas');
// 取得上下文
var context = canvas.getContext('2d');
// 设置绘制样式:设置填充颜色、设置边框颜色、指定画笔的宽度
context.fillStyle = "#000";
context.strokeStyle = "#fff";
context.lineWidth = 5;
// 填充与绘制边框
context.fillRect(0,0,500,350);
context.strokeRect(50,50,180,120);
context.strokeRect(100,100,180,120);
}
解析:
var canvas = document.getElementById(‘canvas’); 是获取canvas的id;
var context = canvas.getContext(‘2d’); 是取得上下文,并设置为2d;
context.fillStyle = “#000”; 表示画布填充颜色是黑色;
context.strokeStyle = “#fff” ; 表示矩形边框颜色是白色;
context.lineWidth = 5; 表示画笔粗细是5px
context.fillRect(0,0,500,350); 表示填充颜色从 x轴0,Y轴0,填充的宽度是500,高度是350;
context.strokeRect(50,50,180,120); 表示矩形x轴50,Y轴50,矩形的宽度是180,高度是180;
context.strokeRect(100,100,180,120); 表示矩形x轴100,Y轴100,矩形的宽度是180,高度是180;
即两个矩形重叠一部分。
context.fillRect(x,y,width,hight); //x,y分别表示横向坐标起点,纵向坐标起点;width,hight分别表示填充的宽和高
context.strokeRect(x,y,width,hight); //x,y分别表示横向坐标起点,纵向坐标起点;width,hight分别表示矩形的宽和高
3.绘画一个圆
html:
<body onload="draw('canvas');">
<canvas id="canvas" width="500" height="350"></canvas>
</body>
js :
function draw(id){
// 1.获取canvas的id
var canvas = document.getElementById('canvas');
//2. 取得上下文
var context = canvas.getContext('2d');
// 3.绘制背景颜色及区域
context.fillStyle = "#eee";
context.fillRect(0,0,500,350);
// 4.开始路径
context.beginPath();
// 5.创建图形路径
context.arc(10,10,10,0,Math.PI*2,true);
// 6.关闭图形路径
context.closePath();
// 7.设置圆形填充色
context.fillStyle = "rgba(250,0,0,0.25)";
context.fill();
}
解析:
context.arc(x,y,radius,starAngle,endAngle,anticlockwise);
x:横向起点坐标
y:纵向起点坐标
radius:圆半径
starAngle:开始角度
endAngle:结束角度 Math.PI*2代表360度
anticlockwise: 是否按照顺时针方向绘制
4. 绘画多个填充圆
html不变都一样。
js:
function draw(id){
// 获取canvas的id
var canvas = document.getElementById('canvas');
// 取得上下文
var context = canvas.getContext('2d');
// 绘制背景
context.fillStyle = "#eee";
context.fillRect(0,0,500,350);
for(var i = 0; i < 10;i++){
// 开始路径
context.beginPath();
// 创建图形路径
context.arc(i*25,i*25,i*10,0,Math.PI*2,true);
// 关闭图形路径
context.closePath();
// 设置填充颜色
context.fillStyle = "rgba(250,0,0,0.25)";
context.fill();
}
}
用for循环来进行绘画,让x轴,y轴,圆半径按倍数扩大。
5.绘画多个圆
html不变
js:
function draw(id){
// 获取canvas的id
var canvas = document.getElementById('canvas');
// 取得上下文
var context = canvas.getContext('2d');
// 绘制背景
context.fillStyle = "#eee";
context.fillRect(0,0,500,350);
for(var i = 0; i < 10;i++){
// 开始路径
context.beginPath();
// 创建图形路径
context.arc(i*25,i*25,i*10,0,Math.PI*2,true);
// 关闭图形路径
context.closePath();
// 设置边框颜色
context.strokeStyle = "green";
context.stroke();
}
}
4和5同时使用
js:
function draw(id){
// 获取canvas的id
var canvas = document.getElementById('canvas');
// 取得上下文
var context = canvas.getContext('2d');
// 绘制背景
context.fillStyle = "#eee";
context.fillRect(0,0,500,350);
for(var i = 0; i < 10;i++){
// 开始路径
context.beginPath();
// 创建图形路径
context.arc(i*25,i*25,i*10,0,Math.PI*2,true);
// 关闭图形路径
context.closePath();
// 设置填充色及边框颜色
context.fillStyle = "rgba(250,0,0,0.25)";
context.fill();
context.strokeStyle = "red";
context.stroke();
}
}