行星运行，刚开始什么都不会，也许查找方法的问题折腾好长一段时间。我自己总结的文档，一共有7个文件夹，如果谁想要可以加我QQ499471127
这是html的帮助文档，其实直接在html帮助文档里，就可以实现，一些东西的查找，这下尴尬了！
自己看了好多博客才，注释代码完成，后来发现直接帮助文档皆可以解决问题。帮助文档连接：http://www.w3school.com.cn/tags/html_ref_canvas.asp
这里强调一点，因为是帮别人注释，别人要求注释就行，偷个懒，就用“//”注释了，建议初学者要用：<!-- --> 注释
不多说了，直接上代码：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8">//设置页面的编码格式。没有设置的时候页面上有中文会出现乱码。 5 <script> 6 window.onload = function(){//当页面加载完成后， 执行的方法 7 var sun = new Image();////创建图片对象 8 var moon = new Image(); 9 var earth = new Image(); 10 function init(){//图片的加载 11 sun.src = 'https://mdn.mozillademos.org/files/1456/Canvas_sun.png';////定义图片的映射地址 12 moon.src = 'https://mdn.mozillademos.org/files/1443/Canvas_moon.png'; 13 earth.src = 'https://mdn.mozillademos.org/files/1429/Canvas_earth.png'; 14 window.requestAnimationFrame(draw);//改变下一次重绘时的DOM样式。 15 } 16 17 function draw() { //定义绘图函数 18 var ctx = document.getElementById('canvas').getContext('2d');//获取要操作的canvas，获取该canvas的2D绘图环境对象 19 20 ctx.globalCompositeOperation = 'destination-over'; 21 ctx.clearRect(0,0,300,300); //绘制裁剪区域（一个矩形） 22 23 ctx.fillStyle = 'rgba(0,0,0,0.4)';//从画布上的(0,0)坐标点为起始点，绘制一个宽高均为0.4px的实心圆 24 ctx.strokeStyle = 'rgba(0,153,255,0.4)'; //从画布上的(0,153)坐标点为起始点，绘制一个宽高均为0.4px的描边圆 25 26 ctx.save(); //保存状态 27 ctx.translate(150,150);//在x轴方向做150px的向右位移，在y轴方向做150px的向下位移 28 29 // Earth 30 var time = new Date(); 31 ctx.rotate( ((2*Math.PI)/60)*time.getSeconds() + ((2*Math.PI)/60000)*time.getMilliseconds() ); 32 ctx.translate(105,0);//在x轴方向做105px的向右位移 33 ctx.fillRect(0,-12,50,24); //重新绘制一个矩形 34 ctx.drawImage(earth,-12,-12); 35 36 // Moon 37 ctx.save();//保存状态 38 ctx.rotate( ((2*Math.PI)/6)*time.getSeconds() + ((2*Math.PI)/6000)*time.getMilliseconds() ); 39 ctx.translate(0,28.5);//在y轴方向做28.5px的向下位移 40 ctx.drawImage(moon,-3.5,-3.5);//修改参数，在画布坐标（-3.5,-3.5）的位置绘制图片 41 ctx.restore();//推出最后一个入栈的状态 42 43 ctx.restore(); //再次推出最后一个入栈的状态 44 45 ctx.beginPath();//重置当前的路径 46 ctx.arc(150,150,105,0,Math.PI*2,false); // Earth orbit 47 ctx.stroke();//描边 48 49 ctx.drawImage(sun,0,0,300,300); 50 51 window.requestAnimationFrame(draw);//改变下一次重绘时的DOM样式。 52 } 53 54 init();//开始运行 55 56 } 57 </script> 58 </head> 59 <body> 60 <canvas id="canvas" width="400" height="300"> //canvas设置好其宽高 61 您的浏览器不支持canvas标签 62 </canvas> 63 </body> 64 </html> 65 66
drawImage() 方法在画布上绘制图像、画布或视频。
drawImage() 方法也能够绘制图像的某些部分，以及/或者增加或减少图像的尺寸。
JavaScript 语法 1
在画布上定位图像：
context.drawImage(img,x,y);
JavaScript 语法 2
在画布上定位图像，并规定图像的宽度和高度：
context.drawImage(img,x,y,width,height);
JavaScript 语法 3
剪切图像，并在画布上定位被剪切的部分：
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);