PDF《使用 Canvas 画图》

//获取网页中的 canvas 对象 (2)使用 JavaScript 获取网页中的 Canvas 对象,并获取 Canvas 对象的 2d 上下文 ctx. 使用 2d 上下文可以调用 Canvas API 绘制图形. var ctx=c.getContext("2d");

//获取 canvas 对象的上下文 (3)调用 beginPath()方法,指示开始绘图路径,即开始绘图.语法如下: ctx.beginPath();

(4)调用 moveTo()方法将坐标移至直线起点.moveTo()方法的语法如下: ctx.moveTo(x,y);

x 和y为要移动至的坐标. (5)调用 lineTo()方法绘制直线.lineTo()方法的语法如下: ctx.lineTo(x,y);

x 和y为直线的终点坐标. (6)调用 stroke()方法,绘制图形的边界轮廓.语法如下: ctx. stroke();

HTML5 网页游戏设计从基础到开发

92 【例5-1】 使用连续画线的方法绘制一个三角形,代码如下: 您的浏览器不支持 canvas. function drawtriangle() { var c=document.getElementById("myCanvas");

//获取网页中的 canvas 对象 var ctx=c.getContext("2d");

//获取 canvas 对象的上下文 ctx.beginPath();

//开始绘图路径 ctx.moveTo(100,0);

//将坐标移至直线起点 ctx.lineTo(50,100);

//绘制直线 ctx.lineTo(150,100);

//绘制直线 ctx.lineTo(100,0);

//绘制直线 ctx.closePath();

//闭合路径,不是必需的,如果线的终点跟起点一样会自动闭合 ctx.stroke();

//通过线条绘制轮廓(边框) } window.addEventListener("load", drawtriangle, true);

浏览例 5-1 的结果如图 5-2 所示. 图5-2 Canvas 绘制一个三角形 【例5-2】 一个通过画线绘制复杂菊花图形的例子. 您的浏览器不支持 canvas. function drawline() { var c=document.getElementById("myCanvas");

//获取网页中的 canvas 对象 var ctx=c.getContext("2d");

//获取 canvas 对象的上下文 var dx=150;

var dy=150;

var s = 100;

第5章使用 Canvas 画图

93 ctx.beginPath();

//开始绘图路径 var x = Math.sin(0);

var y = Math.cos(0);

var dig=Math.PI/15*11;

for(var i = 0;

i =0){ x=x-30;

//前移

30 像素 }else{ x=300;

//回到右侧 } } 浏览例 5-15 的结果是一个游戏人物不停重复地从右侧跑到左侧的动画.