HTML5 Canvas游戏开发（一）基础知识_html/css

HTML5 Canvas游戏开发（一）基础知识_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:19:09

Original

1231 people have browsed it

　　一、绘制基本图形

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

　　1.在HTML中创建Canvas画布：

<canvas id="mycanvas" width="960px" height="580px">    浏览器不支持canvas   <!-- 如果不支持会显示这段文字 --></canvas>

Copy after login

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

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

Copy after login

　　1、绘制线条：

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

Copy after login

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

　　2、绘制空心矩形：

md5.strokeRect(100,100,200,240);   //绘制空心矩形的函数，四个参数分别表示起点X、Y坐标、矩形长、矩形宽

Copy after login

　　3、绘制实心矩形：

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

　　方法二：

md5.rect(10,10,70,40);md5.fill();

Copy after login

　　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";    //设置文字大小和字体样式、字体大小、斜体效果

Copy after login

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

ctx.strokeText("Hello World",100,50);   //设置文字内容

Copy after login

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

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

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

　　三、图片操作

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

drawImage(image,dx,dy);drawImage(image,dx,dy,dw,dh);drawImage(image,sx,sy,sw,sh,dx,dydw,dh);

Copy after login

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

　　绘制图像方法一：

　　在HTML添加如下代码：

<img id="face" src="1.jpg" alt="the face"    style="max-width:90%" height="240px">

Copy after login

　　JavaScript代码如下：

var img=document.getElementById("face");image.onload =function(){        ctx.drawImage(image,10,10);    }

Copy after login

　　绘制图像方法二：

var image = new Image();    image.src = "1.jpg";    image.onload =function(){        ctx.drawImage(image,10,10);        ctx.drawImage(image,260,10,100,100);        ctx.drawImage(image,50,50,100,100,260,130,100,100);    }

Copy after login

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

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

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

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

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

　　3、利用createImageData新建像素。