HTML5 Canvas游戏开发（一）基础知识 - suvllian

　　一、绘制基本图形

　　在每次用canvas画布时，都有几步是“套路”

　　1.在HTML中创建Canvas画布：

<span style="color: #0000ff;"><span style="color: #800000;">canvas </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="mycanvas"</span><span style="color: #ff0000;"> width</span><span style="color: #0000ff;">="960px"</span><span style="color: #ff0000;"> height</span><span style="color: #0000ff;">="580px"</span><span style="color: #0000ff;">></span><span style="color: #000000;">
    浏览器不支持canvas   </span><span style="color: #008000;"><!--</span><span style="color: #008000;"> 如果不支持会显示这段文字 </span><span style="color: #008000;">--></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">canvas</span><span style="color: #0000ff;">></span></span>

　　2.获取画布标签，并得到一个2D对象：

<span style="color: #0000ff;">var</span> c = document.getElementById('mycanvas');  <span style="color: #008000;">//</span><span style="color: #008000;">获取标签</span>
<span style="color: #0000ff;">var</span> ctx = c.getContext("2d");   <span style="color: #008000;">//</span><span style="color: #008000;">返回一个用来绘制环境类型的环境，返回一个2D对象 ，该对象实现了一个画布使用的大多数方法。</span>

　　1、绘制线条：

ctx.lineWidth = 10;    <span style="color: #008000;">//</span><span style="color: #008000;">设置线条宽度   </span>
ctx.strokeStyle = "red";  <span style="color: #008000;">//</span><span style="color: #008000;">设置线条的颜色</span>
ctx.beginPath();    <span style="color: #008000;">//</span><span style="color: #008000;">创建一个新的路径</span>
ctx.moveTo(10,10);      <span style="color: #008000;">//</span><span style="color: #008000;">将画笔光标位置移动到坐标（10,10）处</span>
ctx.lineTo(150,10);    <span style="color: #008000;">//</span><span style="color: #008000;">移动画笔到坐标（150,50）处</span>
ctx.stroke();          <span style="color: #008000;">//</span><span style="color: #008000;">开始绘制定义好的路径</span>

　　通过ctx.lineCap="butt"可以设置线条的形状。有三个可取值：butt、round、square。

　　2、绘制空心矩形：

md5.strokeRect(100,100,200,240);   <span style="color: #008000;">//</span><span style="color: #008000;">绘制空心矩形的函数，四个参数分别表示起点X、Y坐标、矩形长、矩形宽</span>

　　3、绘制实心矩形：

　　方法一：使用fillRext()函数。在绘制实心矩形时，可使用fillStyle设置图形的颜色。

　　方法二：

md5.rect(10,10,70,40<span style="color: #000000;">);
md5.fill();</span>

　　4、画圆：

　　使用arc()函数可以画一个圆弧。有六个参数：圆弧中心X、Y坐标、圆弧半径、起始角度、终

止角度、是否逆时针。可以调用fill()函数画一个实心圆。

　　5、画圆角矩形：

　　用arcTo函数可以画圆角矩形。有五个参数：P1的X、Y和P2的X、Y、圆弧的半径radius。

　　6、擦除Canvas画板：

　　clearRect()函数。四个参数：X、Y、长度、宽度。

　　7、绘制复杂：二维贝塞尔曲线、三维贝塞尔曲线。

　　8、利用clip()函数可在指定区域绘图。

　　9、绘制自定义图形。

　　二、绘制文本　

　　1、cxt.font：设置字体样式。

ctx.font = "30px Arial";    <span style="color: #008000;">//</span><span style="color: #008000;">设置文字大小和字体样式、字体大小、斜体效果</span>

　　2、cxt.strokeText()：设置文字内容。空心文字！有四个参数：文本字符串，坐标X、坐标Y、文本宽 。最后一个参数可以省去，省去时文本宽度自动设定为整个文本的宽度。

ctx.strokeText("Hello World",100,50);   <span style="color: #008000;">//</span><span style="color: #008000;">设置文字内容</span>

　　3、cxt.fillText():设置文字内容。实心文字！参数同strokeText();

　　4、ctx.textAlign=" ";设置文字对齐方式：center、left、right。

　　5、ctx.textBaseline=" "; 设置文字纵向对齐方式：top、middle、bottom、ideographic等。

　　三、图片操作

　　1、利用drawImage()函数绘制图片，该函数有三种原型：

<span style="color: #000000;">drawImage(image,dx,dy);
drawImage(image,dx,dy,dw,dh);
drawImage(image,sx,sy,sw,sh,dx,dydw,dh);</span>

　　第一参数都是要绘制的对象。

　　绘制图像方法一：

　　在HTML添加如下代码：

<span style="color: #0000ff;"><span style="color: #800000;">img </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="face"</span><span style="color: #ff0000;"> src</span><span style="color: #0000ff;">="1.jpg"</span><span style="color: #ff0000;"> alt</span><span style="color: #0000ff;">="the face"</span><span style="color: #ff0000;"> width</span><span style="color: #0000ff;">="240px"</span><span style="color: #ff0000;"> height</span><span style="color: #0000ff;">="240px"</span><span style="color: #0000ff;">></span></span>

　　JavaScript代码如下：

<span style="color: #0000ff;">var</span> img=document.getElementById("face"<span style="color: #000000;">);
image.onload </span>=<span style="color: #0000ff;">function</span><span style="color: #000000;">(){
        ctx.drawImage(image,</span>10,10<span style="color: #000000;">);
    }  </span>

　　绘制图像方法二：

<span style="color: #0000ff;">var</span> image = <span style="color: #0000ff;">new</span><span style="color: #000000;"> Image();
    image.src </span>= "1.jpg"<span style="color: #000000;">;
    image.onload </span>=<span style="color: #0000ff;">function</span><span style="color: #000000;">(){
        ctx.drawImage(image,</span>10,10<span style="color: #000000;">);
        ctx.drawImage(image,</span>260,10,100,100<span style="color: #000000;">);
        ctx.drawImage(image,</span>50,50,100,100,260,130,100,100<span style="color: #000000;">);
    } </span>

　　一定要添加图片的onload事件监听！

　　第一个函数从（10,10）开始绘制整张图片。

　　第二个函数从（260,10）绘制整张图片到长100、宽100的矩形区域内。

　　第三个函数表示截取图片从（50,50）到（100,100）的部分，从坐标（260,130）开始绘制，放到长100、宽100的矩形区域内。

　　2、利用getImageData和putImageData绘制图片。

　　3、利用createImageData新建像素。