canvas一：基本认识

标签：htm   数据库   text   最好   样式   fill   web   image   坐标   

最近弄数据库弄得头大，想着没事整理一下画布canvas吧，毕竟canvas用途广泛，是html游戏开发必不可少的一环，也是h5新特性中的重中之重

首先canvas是一个html标签，可以给他设置一些css的样式，它默认是黑色的，宽为300px,高为150px的一个区域，他的坐标为（0,0），也就是浏览器的左上方，为了方便观察效果，我习惯将背景设置为黑色，canvas为白色，我觉得还挺美的，不对，劳资的最漂亮0.0...

再设置一下宽高吧，对于我这种强迫症来说，默认比例实在恶心，在设置的时候注意一点，最好设置行内样式，如果在外部样式中设置宽高的话，里面的填充方块也会等比例进行缩放，而不是默认的1:1。反正，你赢我的就对了，那我就把它设置为400*400吧，效果是这个样子滴：

我给canvas一个id，方便我进行dom操作

<canvas id="c1" width="400px" height="400px">
<-----浏览器不支持canvas的时候会显示span里面的内容------>
    <span>不支持canvas的浏览器</span> 
</canvas>

好了，我要进行js操作了，你且看好了

1.绘制环境

getContext("2d"),这个命令是对canvas进行操作比不可少的一步，为2的绘制环境，那么有没有3d呢，有，但不是在里面写3d,而是这样写getContext("webgl")

var oC = document.getElementById("c1");

var oGC = oC.getContext("2d");//webgl:3D绘图

2.绘制方块

我们以简单的方块为例，canvas为我们提供了两种绘制方块的方法

*1.fillRect(L,T,W,H):填充，默认颜色是黑色.
*2.strokeRect(L,T,W,H):边框，边框默认为1px,黑色

 oGC.fillRect(50,50,50,50);
 oGC.strokeRect(50,50,50,50);

3.设置绘图

必须要放在绘制方块的上面才有效果，不对，是放在绘制环境的前面

*1.fillStyle:填充颜色
*2.lineWhite:线宽度
*3.strokeStyle:边框颜色

oGC.fillStyle = "red";
    oGC.lineWidth = 10;
    oGC.strokeStyle = "yellow";

canvas一：基本认识

标签：htm   数据库   text   最好   样式   fill   web   image   坐标   

原文地址：http://www.cnblogs.com/mmykdbc/p/6652711.html