您正在浏览:主页 > 热血传奇网页游戏 >
HTML5 Canvas盛大传奇官网游戏开发（一）基础知识
作者：热血传奇网页版 来源：http://www.softpl.com 时间：2016-05-02 20:48
一、绘制基本图形 在每次用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新建像素。
<< 上一篇：中国手机游戏行业发新开传奇网站展回顾与市场前景预测报告（2015 >>
<< 下一篇：二次元福利 ste传奇2单机版am动漫二次元游戏超特惠 >>