基础结构
新建一个目录存放相关demo。然后在目录中新建一个structure.html
的html文件。输入以下代码,保存为UTF-8格式,为了在开发中不出现一些编码相关的问题,建议开发的时候默认编码全为UTF-8。
<!DOCTYPE html>
<html>
<head>
<title>canvas</title>
<meta charset="utf-8">
<script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
<canvas id="my_canvas" width="600" height="600">
浏览器不支持canvas
</canvas>
</body>
<script type='text/javascript'>
$(function (){
var c=document.getElementById("my_canvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(50,50,180,180);
});
</script>
</html>
这里我们新建了基本的框架,以后的例子都在这个基础上进行编写。我们加载了外部的jquery库,便于后期相关操作。同时,放置了一个canvas标签在body标签里面,设置了它的id,宽和高。当文档加载之后,获取my_canvas这个元素。my_canvas这个DOM对象拥有getContext这个方法,这里我们使用它获取"2d"上下文,上下文
这个词第一次听到是不好理解的。你可以把它理解为一个对象,它有方法和属性,基本上所有的画图方法都绑定都这个对象上面,同时它还维护画图状态。
canvas里面fill指的是填充,如果你玩过photoshop
,那么你一定知道,填充是指处理一块连续的区域;stroke指的是描边,只处理图形的边缘。
这里我们设置了填充颜色fillStyle,为什么不是fillColor?因为填充还可能填充渐变色,其他样式等等;颜色设置就是一般的css颜色值。
fillRect很明显就是填充一个矩形,参数形式如下:
context.fillRect(startX,startY,width,height);
参数 | 描述 |
---|---|
startX | 左上角的 x 坐标 |
startY | 矩形左上角的 y 坐标 |
width | 矩形的宽度 |
height | 矩形的高度 |
打开浏览器,打开我们刚才 编写的文件,效果如下: