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);//绘制矩形边框
}
效果图：
313
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
