canvas元素的基础知识
canvas元素是HTML5中的一个新增的重要元素,专门用来绘制图形。在页面上放置一个canvas元素,就相当于在页面上放置了一块“画布”,可以在其中进行图形的描绘。但是,在canvas元素中进行绘画,并不是拿鼠标来作画。事实上,canvas元素只是一块无色透明的区域,需要利用JavaScript编写在其中进行绘画的脚本。
1. 用canvas元素基本知识
1)取得canvas元素:使用document.getElementById等方法取得canvas对象。
2)取得上下文(context):使用canvas对象的getContext方法来获得。
3)填充与绘制边框:结合使用fill和stroke方式绘制图形。
4)设定绘图样式(style)
fillStyle:填充的样式,填入颜色值
strokeStyle:图形边框的样式,填入颜色值。
5)指定线宽:lineWidth
6)指定颜色值
7)绘制矩形
context.fillRect(x,y,width,height)
context.strokeRect(x,y,width,height)
x-横坐标,y-纵坐标,width-矩形宽带,height-矩形高度,坐标原点为canvas画布的最左上角。
2. 利用canvas绘制矩形
HTML代码:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>demo</title>
<script src="demo.js"></script>
</head>
<body onload="draw('canvas');">
<h1>canvas元素示例</h1>
<canvas id="canvas" width="400" height="300"></canvas>
</body>
</html>
js代码:
function draw(id){
var canvas=document.getElementById(id);
if (canvas == null) {
return false
}
var context= canvas.getContext('2d');
context.fillStyle="#EEEEFF";
context.fillRect(0,0,400,300);
context.fillStyle="#D620E8";
context.strokeStyle="#2AC773";
context.lineWidth=1;
c