标签：
canvas的创建，canvas图片的绘制及图片的封装，矩形，矩形边框，圆，线的绘制。
JavaScript代码如下：main.js
/** * Created by zengkm on 15-9-1. */ //初始化 var myworld=function(){ console.log("输出一些东西"); var canvas = document.getElementById("my_canvas"); canvas.width="800"; canvas.height="400"; var context =canvas.getContext("2d"); drawCanvas(context); for(var i=0;i<4;i++) { drawImg(context,"res/heh.png",200*i,50); } } //在canvas上绘图 var drawCanvas = function(ctx){ //矩形绘制 //参数：X坐标，Y坐标，宽，高 ctx.fillStyle="#FFCC00"; ctx.fillRect(200,150,100,100); //矩形边框绘制 //参数：X坐标，Y坐标，宽，高 ctx.strokeStyle ="FF0000"; ctx.strokeRect(400,150,100,100); //圆的绘制 //参数：X坐标，Y坐标，圆周半径，起始弧度，结束弧度，圆弧绘制方向bool值 ctx.arc(50,200,50,(Math.PI/180)*0,(Math.PI/180)*360,false); ctx.fill();//园的绘制填充 //线的绘制 ctx.fillStyle ="ff89a"; ctx.linePath =5; ctx.beginPath();//标识开始绘制 ctx.moveTo(700,200); ctx.lineTo(600,200); ctx.stroke();//线的填充绘制 ctx.closePath();//关闭绘制 } //canvas图片绘制 var drawImg = function(ctx,srcurl,x,y){ var img = new Image(); img.src =srcurl; img.onload = function(){ //参数：img对象，X坐标，Y坐标 ctx.drawImage(img,x,y); } } window.onload = myworld();
HTML代码：index.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>canvas实现</title> </head> <body> <canvas id="my_canvas" style="background-color: green" width="400" height="200"></canvas> <script style="text/javascript" src="src/main.js"></script> </body> </html>
最终实现的效果，画布颜色为绿色，第一行循环绘制图片4张，第二行画圆，矩形，矩形边框，线。
标签：
原文地址：http://www.cnblogs.com/yulian/p/4776866.html
