正如摄影是用光影作画,HTML5则是用代码作画。既然是作画,那我们就首先要聊聊HTML5里面最基础的东东:画布。因为本人不是大牛,无法给出很深奥的底层理论,那咱们就实际点,直接拿来用吧。
例1:
<body>
<canvas id='canvas' width='600' height='300'>
Canvas not supported
</canvas>
<script src='example.js'></script>
</body>
var canvas = document.getElementById('canvas'), (第一步)
context = canvas.getContext('2d'); <span > </span>(第二步)
context.font = '38pt Arial'; <span > </span>(第三步)
context.fillStyle = 'cornflowerblue';
context.strokeStyle = 'blue';
context.fillText('Hello Canvas', canvas.width/2 - 150,
canvas.height/2 + 15);
context.strokeText('Hello Canvas', canvas.width/2 - 150,
canvas.height/2 + 15 );
以上是非常简单的调用画布,并且作画的一个超级无敌例子,大家一目了然!canvas 是一个元素节点 其它应该木有什么需要进一步描述了。那么我们总结一下:
1. 通过调用document.getElementById() 取得对Canvas的引用。
2. 通过调用getContext('2d') 来获取图形的CONTEXT,我们就理解成取得一只画笔吧!(大家注意2d, 那么可想而知肯定有3d )
3. 用画笔开始作画。
OK let's move on!
这里大家要注意一点,画布大小和绘画平面大小不是一回事。我们再来举一个例子:
例2:
<!DOCTYPE html>
<head>
<title>画布大小: 500 x 500,
绘画平面大小: 300 x 150</title>
<style>
body {
background: #dddddd;
}
#canvas {
margin: 20px;
padding: 20px;
background: #ffffff;
border: thin inset #aaaaaa;
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<canvas id='canvas'>
Canvas not supported
</canvas>
<script src='example.js'></script>
</body>
</html>
OK ,跟第一个例子不同的是我们没有设置元素Canvas的宽高属性,而是用CSS进行控制。那么问题就来了,如果这样设置的话,画布大小就成了500px*500px, 那实际绘画平面的大小是多少呢? 是300px*150px. 而如果我们按照例1中,给元素直接这是宽高属性,那么画布大小就等于绘画平面的大小。 咦? 你肯定会问,我例2里并没有设定绘画平面大小,你怎么就说是300px*150px ? 哦,那是因为这个是默认值。。。 另外,我们要注意的是,当两个平面大小不一致的时候,默认情况下,绘画平面会自动缩放到画布的大小。 OK ,大家自己试试就可以了,理论很枯燥。OK?
我们推荐例1的设置方式,即直接给Canvas元素设置宽和高!!!便于控制效果。
在结束本文之前,我们再聊一下从 2d context 里面除了Canvas之外还有哪些属性呢,换言之,可以通过本文中context 直接调用的属性有哪些呢?
fillStyle font globalAlpha globalComposite-Operation lineCap lineWidth
我后面会跟大家一起慢慢学习的哟~~
That's it everybody!~~~~