码迷,mamicode.com
首页 > Web开发 > 详细

HTML5 Canvas游戏开发(一)基础知识

时间:2016-05-02 02:05:58      阅读:179      评论:0      收藏:0      [点我收藏+]

标签:

  一、绘制基本图形

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

  1.在HTML中创建Canvas画布:

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

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

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

  1、绘制线条:

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

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

  2、绘制空心矩形:

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

  3、绘制实心矩形:

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

  方法二:

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

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

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

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

  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);

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

  绘制图像方法一:

  在HTML添加如下代码:

<img id="face" src="1.jpg" alt="the face" width="240px" height="240px">

  JavaScript代码如下:

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

  绘制图像方法二:

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);
    } 

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

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

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

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

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

  3、利用createImageData新建像素。

 

HTML5 Canvas游戏开发(一)基础知识

标签:

原文地址:http://www.cnblogs.com/suvllian/p/5451612.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!