1、利用canvas元素创建画布
(1)创建画布:指定canvas元素的三个属性id、width(宽度)、height(高度)
(2)引入JS脚本:利用script标签引入一个外部JS脚本文件,该文件中定义一个draw函数,包括绘制各种图形的逻辑实现过程
(3)使用draw函数进行绘画:在body元素中加入οnlοad="draw('canvas')"属性,调用脚本文件中的draw函数,canvas的基本语法如下:
<!DOCTYPEhtml>
<html>
<head>
<meta charset='utf-8'>
<title>canvas元素</title>
<scripttype="text/javascript" src='canvas.js'></script>
</head>
<bodyοnlοad="draw('canvas')">
<canvasid='canvas' width='500' height="350"></canvas>
</body>
</html>
2、利用canvas元素及JS脚本绘制矩形(下面步骤要放在一个JS文件中)
(1)获取canvas元素:利用document.getElementById()方法
(2)获取图形上下文对象(封装了很多绘图功能):利用canvas对象的getContext()方法,并传入参数‘2d’
(3)设置绘制样式:利用上下文对象的fillStyle属性设置填充颜色值,strokeStyle属性设置边框颜色值
(4)设置颜色值:有多种方式①颜色名(black)②16进制表示法(#000000)③rgb(rgba(0,0,0))
④rgba(rgba(0,0,0,1))
(5)设置边框宽度:利用上下文对象的lineWidth属性,可以设置任何直线的宽度
(6)绘制最终矩形:使用上下文对象的fillRect(x,y,width,height)来填充矩形,strokeRect(x,y,width,height)来绘制矩形边框,参数中的x,y分别表示矩形的起点横坐标和纵坐标,坐标原点是画布的左上角,width、height分别表示矩形的宽度和高度,demo及呈现效果如下:
Index.html文件中的代码:
<!DOCTYPEhtml>
<html>
<head>
<meta charset='utf-8'>
<title>canvas元素绘制矩形</title>
<scripttype="text/javascript" src='canvas.js'></script>
<style type="text/css">
body{
margin: 0;
padding: 0;
}
</style>
</head>
<bodyοnlοad="draw('canvas')">
<canvasid='canvas' width='400' height="300"></canvas>
</body>
</html>
canvas.js文件中的代码:
functiondraw(id){
var canvas=document.getElementById(id);
var context=canvas.getContext('2d');
context.fillStyle='#000';//填充颜色为黑色
context.strokeStyle='#f60';//边框颜色为橙色
context.lineWidth=5;
context.fillRect(0,0,400,300);//绘制填充矩形
context.strokeRect(50,50,180,120);//绘制矩形边框
}
效果图: