首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

canvas 步骤

2012-10-16 
canvas 方法canvas.drawImage绘制图片// 绘制背景var dx0, dy0 context.drawImage(ImgCache[bg],dx,d

canvas 方法
canvas.drawImage  绘制图片
// 绘制背景
var dx=0, dy=0 ;
context.drawImage(ImgCache["bg"],dx,dy);

//绘制站在地上的player, 坐标为200,284
var sx=0, sy=60, sw=50, sh=60;
var dx=400, dy=284, dw=50, dh=60;
context.drawImage(ImgCache["player"], sx, sy, sw, sh, dx, dy, dw, dh );

//第一个参数image可以用HTMLImageElement,HTMLCanvasElement或者HTMLVideoElement作为参数。
//sx和sy是image所要绘制的起始位置,sw和sh是image所要绘制区域(相对image的sx和sy坐标的偏移量)的宽度和高度值。
//dx和dy是image在canvas中定位的坐标值;dw和dh是image在canvas中即将绘制区域(相对dx和dy坐标的偏移量)的宽度和高度值;



canvas.beginPath()
canvas.beginPath() 方法来告诉 Context 对象开始绘制一个新的路径,否则接下来绘制的路径会与之前绘制的路径叠加,在填充或画边框时就会出现问题。在绘制完成路径后,可以直接使用 canvas.closePath() 方法来关闭路径,或者手动关闭路径。另外,如果在填充时路径没有关闭,那么canvas会自动调用 closePath 方法将路径关闭。


context.translate(130,250);

作用就是移动原点,默认的原点(0,0)是在屏幕左上角的,你可以通过translate(x,y)把点(x,y)作为原点

热点排行