为了更好的学习canvas知识，你需要了解一些基本的HTML，js等基础知识。
本节知识是利用canvas画布在浏览器中绘制一个黑色矩形。只有几行代码，非常的简单。
1，在body中添加canvas元素。
<canvas id="myCanvas" width="1000" height="800"></canvas>
这段代码并不会产生任何效果，它仅仅是创建了一个空白的canvas元素，我们还没有对它进行任何操作。在canvas元素中有两个属性需要设置分别是width和height，这两个属性明确定义了canvas元素的尺寸。如果不定义这两个属性，它会采用默认的高度和宽度， 分别是300和150。
2，代码中使用了jQuery，通过get方法获取渲染上下文。并保存在变量context中。接下来就是绘制矩形了。context.fillrect(x,y,width,height)。前两个参数是矩形距离左上角的距离，后两个参数是宽度和高度。由于默认的颜色是黑色，所以我们看到的是一个黑色的矩形。关于样式后面的章节我会讲到。运行代码就会在浏览器中看到一个黑色的矩形。设置的高度和宽度都为100，所以也是正方形。
所有的代码如下，是不是很简单，我想说是非常简单。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas基础教程</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var canvas = $("#myCanvas");
var context = canvas.get(0).getContext("2d");
context.fillRect(50,50,100,100);
});
</script>
</head>
<body>
<canvas id="myCanvas" width="1000" height="800"></canvas>
</body>
</html>
运行的结果如下
黑色矩形.png
网友评论