知向前端
首页
微语
登录
html5画布canvas效果实例
2015-5-21 Jon
使用html5画布canvas实现简单画板
<br /> <!DOCTYPE html><br /> <html lang="en"><br /> <head><br /> <meta charset="UTF-8"><br /> <title>简单画板</title><br /> <style><br /> body{margin:0;}<br /> #paint{border:1px solid #232323;}<br /> </style><br /> </head><br /> <body><br /> <canvas id="paint" width="1200" height="600"><br /> 您的浏览器不支持canvas<br /> </canvas><br /> <br /> <script><br /> var oPaint=document.getElementById('paint');<br /> var cxt=oPaint.getContext('2d');<br /> cxt.lineWidth=3;<br /> cxt.strokeStyle="blue";<br /> var cont=0;<br /> oPaint.onmousedown=function(e){<br /> var event=e||event;<br /> var mouseX=event.pageX-this.offsetLeft;<br /> var mouseY=event.pageY-this.offsetTop;<br /> cont=1;<br /> cxt.moveTo(mouseX,mouseY);<br /> }<br /> oPaint.onmousemove=function(e){<br /> var event=e||event;<br /> var mouseX=event.pageX-this.offsetLeft;<br /> var mouseY=event.pageY-this.offsetTop;<br /> if(cont){<br /> cxt.lineTo(mouseX,mouseY);<br /> cxt.stroke();<br /> }<br /> }<br /> oPaint.onmouseup=function(e){<br /> cont=0;<br /> }<br /> </script><br /> </body><br /> </html><br />
运行代码
您可以修改框中代码后运行查看
使用html5画布画出简易时钟
<br /> <!DOCTYPE html><br /> <html lang="en"><br /> <head><br /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"><br /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /><br /> <title>简易时钟</title><br /> </head><br /> <body><br /> <canvas id="clock" width="500" height="500"><br /> 你可以更新浏览器了<br /> </canvas><br /> <script><br /> var clock=document.getElementById('clock');<br /> var cxt=clock.getContext('2d');<br /> <br /> function drawClock(){<br /> // 清除画布<br /> cxt.clearRect(0,0,500,500);<br /> var now=new Date();<br /> var sec=now.getSeconds();<br /> var min=now.getMinutes();<br /> var hour=now.getHours();<br /> //小时必须获取浮点类型（小时+分数转化成的小时）<br /> hour=hour+min/60;<br /> // 问题 19:23:30<br /> // 将24小时进制转换成12小时<br /> hour=hour>12?hour-12:hour;<br /> <br /> // 表盘(蓝色)<br /> cxt.lineWidth=10;<br /> cxt.strokeStyle="blue";<br /> cxt.beginPath();<br /> cxt.arc(250,250,200,0,360,false);//x,y,半径,起始弧度，结束弧度,旋转方向<br /> cxt.closePath();<br /> cxt.stroke();//画上<br /> <br /> // 刻度<br /> // 时刻度<br /> for(var i=0;i<12;i++){<br /> cxt.save();<br /> cxt.lineWidth=7;<br /> cxt.strokeStyle="#000";<br /> // 设置0,0点<br /> cxt.translate(250,250);<br /> // 设置旋转角度<br /> cxt.rotate(i*30*Math.PI/180);//角度*Math.PI/180=弧度<br /> cxt.beginPath();<br /> cxt.moveTo(0,-170);<br /> cxt.lineTo(0,-190);<br /> cxt.closePath();<br /> cxt.stroke();<br /> cxt.restore();<br /> }<br /> // 分刻度<br /> for(var i=0;i<60;i++){<br /> cxt.save();<br /> cxt.lineWidth=5;<br /> cxt.strokeStyle="#000";<br /> cxt.translate(250,250);<br /> cxt.rotate(i*6*Math.PI/180);<br /> cxt.beginPath();<br /> cxt.moveTo(0,-180);<br /> cxt.lineTo(0,-190);<br /> cxt.closePath();<br /> cxt.stroke();<br /> cxt.restore();<br /> }<br /> // 时针<br /> cxt.save();<br /> cxt.lineWidth=7;<br /> cxt.strokeStyle="#000";<br /> cxt.translate(250,250);<br /> cxt.rotate(hour*30*Math.PI/180);<br /> cxt.beginPath();<br /> cxt.moveTo(0,-120);<br /> cxt.lineTo(0,8);<br /> cxt.closePath();<br /> cxt.stroke();<br /> cxt.restore();<br /> <br /> // 分针<br /> cxt.save();<br /> cxt.lineWidth=5;<br /> cxt.strokeStyle="green";<br /> cxt.translate(250,250);<br /> cxt.rotate(min*6*Math.PI/180);<br /> cxt.beginPath();<br /> cxt.moveTo(0,-150);<br /> cxt.lineTo(0,12);<br /> cxt.closePath();<br /> cxt.stroke();<br /> cxt.restore();<br /> <br /> // 秒针<br /> cxt.save();<br /> cxt.lineWidth=3;<br /> cxt.strokeStyle="red";<br /> cxt.translate(250,250);<br /> cxt.rotate(sec*6*Math.PI/180);<br /> cxt.beginPath();<br /> cxt.moveTo(0,-170);<br /> cxt.lineTo(0,15);<br /> cxt.closePath();<br /> cxt.stroke();<br /> // 画出时针、分针、秒针的交叉点<br /> cxt.beginPath();<br /> cxt.arc(0,0,5,0,360,false);<br /> cxt.closePath();<br /> // 设置填充样式<br /> cxt.fillStyle="gray";<br /> cxt.fill();<br /> cxt.stroke();<br /> cxt.beginPath();<br /> cxt.arc(0,-150,3,0,360,false);<br /> cxt.closePath();<br /> cxt.fillStyle="yellow";<br /> cxt.fill();<br /> cxt.stroke();<br /> cxt.restore();<br /> }<br /> drawClock();<br /> setInterval(drawClock,1000);<br /> </script><br /> </body><br /> </html><br />
运行代码
您可以修改框中代码后运行查看
使用html5画布画出八大星系（js使用方法实现）
<br /> <!DOCTYPE html><br /> <html lang="en"><br /> <head><br /> <meta charset="UTF-8"><br /> <title>八大星系</title><br /> <style><br /> #canStart{background: #000;}<br /> </style><br /> </head><br /> <body><br /> <canvas id="canStart" height="1000" width="1000"><br /> 您的浏览器不支持canvas<br /> </canvas><br /> <script><br /> var canStart=document.getElementById('canStart');<br /> var cxt=canStart.getContext('2d');<br /> <br /> // 画轨道<br /> function drawWay(){<br /> for(var i=0;i<8;i++){<br /> cxt.beginPath();<br /> cxt.strokeStyle="#fff";<br /> cxt.arc(500,500,(i+1)*50,0,360,false);<br /> cxt.closePath();<br /> cxt.stroke();<br /> }<br /> }<br /> var time=0;<br /> // 画星球<br /> //圆点坐标x、y,半径r,周期t,填充色sColor,eColor<br /> function drawStart(x,y,r,t,sColor,eColor){<br /> cxt.save();<br /> cxt.translate(500,500);<br /> cxt.rotate(time*360/t*Math.PI/180);<br /> cxt.beginPath();<br /> cxt.arc(x,y,r,0,360,false);<br /> cxt.closePath();<br /> var color=cxt.createRadialGradient(x,y,0,x,y,r);<br /> color.addColorStop(0,sColor);<br /> color.addColorStop(1,eColor);<br /> cxt.fillStyle=color;<br /> cxt.fill();<br /> cxt.restore();<br /> }<br /> function useDrawStart(){<br /> cxt.clearRect(0,0,1000,1000);<br /> drawWay();<br /> // 画太阳<br /> drawStart(0,0,20,0,'#f00','#f90');<br /> // 画水星<br /> drawStart(-50,0,10,87,'#A69697','#5C3E40');<br /> // 画金星<br /> drawStart(-100,0,10,224,'#C4BBAC','#1F1315');<br /> // 画地球<br /> drawStart(-150,0,10,365,'#78B1E8','#050C12');<br /> // 画火星<br /> drawStart(-200,0,10,686,'#CEC9B6','#76422D');<br /> // 画木星<br /> drawStart(-250,0,10,4332,'#C0A48E','#322222');<br /> // 画土星<br /> drawStart(-300,0,10,10759,'#F7F9E3','#5C4533');<br /> // 画天王星<br /> drawStart(-350,0,10,30799,'#A7E1E5','#19243A');<br /> // 画海王星<br /> drawStart(-400,0,10,164.8*365,'#0661B2','#1E3B73');<br /> time++;<br /> }<br /> setInterval(useDrawStart, 10);<br /> </script><br /> </body><br /> </html><br />
运行代码
您可以修改框中代码后运行查看
使用html5画布画出八大星系（js使用对象实现）
<br /> <!doctype html><br /> <html><br /> <head><br /> <meta charset="UTF-8"><br /> <title>八大星系2</title><br /> </head><br /> <body><br /> <canvas id="canvas" width="1000" height="1000" style="background:#000"><br /> 您的浏览器不支持canvas标签<br /> </canvas><br /> <script><br /> //设置2d绘图环境<br /> var cxt=document.getElementById('canvas').getContext('2d');<br /> <br /> //轨道<br /> function drawTrack(){<br /> for(var i=0;i<8;i++){<br /> cxt.beginPath();<br /> cxt.arc(500,500,(i+1)*50,0,360,false);<br /> cxt.closePath();<br /> //设置笔触的颜色<br /> cxt.strokeStyle="#fff";<br /> cxt.stroke();<br /> }<br /> <br /> }<br /> drawTrack();<br /> //星球<br /> function Star(x,y,radius,cycle,sColor,eColor){<br /> //画出星球需要哪些属性<br /> //星球的坐标点<br /> this.x=x;<br /> this.y=y;<br /> //星球的半径<br /> this.radius=radius;<br /> //公转周期<br /> this.cycle=cycle;<br /> //星球的颜色(开始色,结束色)<br /> this.sColor=sColor;<br /> this.eColor=eColor;<br /> //新建一个渐变颜色空对象<br /> this.color=null;<br /> //设置一个计时器<br /> this.time=0;<br /> this.draw=function(){<br /> //保存之前的画布内容<br /> cxt.save();<br /> //重置0,0坐标点<br /> cxt.translate(500,500);<br /> //设置旋转角度<br /> cxt.rotate(this.time*(360/this.cycle)*Math.PI/180);<br /> //画星球<br /> cxt.beginPath();<br /> cxt.arc(this.x,this.y,this.radius,0,360,false);<br /> cxt.closePath();<br /> //设置星球的填充颜色<br /> //新建渐变对象<br /> this.color=cxt.createRadialGradient(this.x,this.y,0,this.x,this.y,this.radius);<br /> //设置渐变效果<br /> this.color.addColorStop(0,this.sColor);//渐变开始点和颜色<br /> this.color.addColorStop(1,this.eColor);//渐变结束点和颜色<br /> cxt.fillStyle=this.color;//将渐变对象复制给填充画笔<br /> //填充星球<br /> cxt.fill();<br /> <br /> //恢复之前保存的画布内容<br /> cxt.restore();<br /> //执行完毕之后时间增加<br /> this.time+=1;<br /> }<br /> }<br /> <br /> //创建一个太阳对象的构造函数<br /> function Sun(){<br /> Star.call(this,0,0,20,0,"#F00","#f90");<br /> }<br /> //创建一个水星的对象构造方法<br /> function Mercury(){<br /> Star.call(this,0,-50,10,87.70,"#A69697","#5C3E40");<br /> }<br /> //创建一个金星的对象构造方法<br /> function Venus(){<br /> Star.call(this,0,-100,10,224.701,"#C4BBAC","#1F1315");<br /> }<br /> //创建一个地球的对象构造方法<br /> function Earth(){<br /> Star.call(this,0,-150,10,365.224,"#78B1E8","#050C12");<br /> }<br /> //创建一个火星的对象构造方法<br /> function Mars(){<br /> Star.call(this,0,-200,10,686.98,"#CEC9B6","#76422D");<br /> }<br /> //创建一个木星的对象构造方法<br /> function Jupiter(){<br /> Star.call(this,0,-250,10,4332.589,"#C0A48E","#322222");<br /> }<br /> //创建一个土星的对象构造方法<br /> function Saturn(){<br /> Star.call(this,0,-300,10,10759.5,"#F7F9E3","#5C4533");<br /> }<br /> <br /> //创建一个天王星的对象构造方法<br /> function Uranus(){<br /> Star.call(this,0,-350,10,30799.095,"#A7E1E5","#19243A");<br /> }<br /> //创建一个天王星的对象构造方法<br /> function Neptune(){<br /> Star.call(this,0,-400,10,60152,"#0661B2","#1E3B73");<br /> }<br /> <br /> <br /> <br /> //创建太阳对象实例<br /> var sun=new Sun();<br /> //创建水星对象实例<br /> var water=new Mercury();<br /> //创建金星对象实例<br /> var gold=new Venus();<br /> //创建一个地球对象实例<br /> var diqiu=new Earth();<br /> //创建一个火星对象实例<br /> var fire=new Mars();<br /> //创建一个木星对象实例<br /> var wood=new Jupiter();<br /> //创建一个土星对象实例<br /> var soil=new Saturn();<br /> //创建一个天王星对象实例<br /> var god=new Uranus();<br /> //创建一个海王星对象实例<br /> var sea=new Neptune();<br /> <br /> function move(){<br /> //清除画布<br /> cxt.clearRect(0,0,1000,1000);<br /> //画出轨道<br /> drawTrack();<br /> //画出每个星球<br /> sun.draw();<br /> water.draw();<br /> gold.draw();<br /> diqiu.draw();<br /> fire.draw();<br /> wood.draw();<br /> soil.draw();<br /> god.draw();<br /> sea.draw();<br /> }<br /> <br /> //使个星球进行运动<br /> setInterval(move,10);<br /> </script><br /> </body><br /> </html><br />
运行代码
您可以修改框中代码后运行查看
画出自己的坦克并可以发单颗子弹（目前有点小bug）
<br /> <!DOCTYPE html><br /> <html lang="en"><br /> <head><br /> <meta charset="UTF-8"><br /> <title>画出自己的坦克</title><br /> <style><br /> #tankCanvas{background: #000;}<br /> </style><br /> </head><br /> <body><br /> <canvas width="600" height="400" id='tankCanvas'><br /> 你的浏览器不支持画布<br /> </canvas><br /> <br /> <script><br /> var tankCanvas=document.getElementById('tankCanvas');<br /> var cxt=tankCanvas.getContext('2d');<br /> var heroX=150;<br /> var heroY=150;<br /> var dire=0;<br /> var speed=2;<br /> <br /> // 子弹定时器<br /> var timer2=null;<br /> // 子弹坐标<br /> var bulletX,bulletY,bulleDire;<br /> // 定义判断是否过界<br /> var yes=true;<br /> <br /> function drawHero(heroX,heroY,dire,speed){<br /> this.heroX=heroX;<br /> this.heroY=heroY;<br /> this.dire=dire;<br /> this.speed=speed;<br /> this.move=function(){<br /> switch (this.dire) {<br /> case 0:<br /> case 2:<br /> cxt.fillStyle='#BB8E00';<br /> cxt.fillRect(this.heroX,this.heroY,5,26);<br /> cxt.fillRect(this.heroX+15,this.heroY,5,26);<br /> cxt.fillRect(this.heroX+6,this.heroY+5,8,16);<br /> cxt.beginPath();<br /> cxt.fillStyle='#FDD900';<br /> cxt.arc(this.heroX+10,this.heroY+13,4,0,360,false);<br /> cxt.fill();<br /> cxt.closePath();<br /> cxt.beginPath();<br /> cxt.lineWidth=2;<br /> cxt.strokeStyle="#FDD900";<br /> cxt.moveTo(this.heroX+10,this.heroY+13);<br /> if(this.dire==0){<br /> cxt.lineTo(this.heroX+10,this.heroY);<br /> }else{<br /> cxt.lineTo(this.heroX+10,this.heroY+26);<br /> }<br /> cxt.closePath();<br /> cxt.stroke();<br /> break;<br /> case 1:<br /> case 3:<br /> cxt.fillStyle='#BB8E00';<br /> cxt.fillRect(this.heroX,this.heroY,26,5);<br /> cxt.fillRect(this.heroX,this.heroY+15,26,5);<br /> cxt.fillRect(this.heroX+5,this.heroY+6,16,8);<br /> cxt.beginPath();<br /> cxt.fillStyle='#FDD900';<br /> cxt.arc(this.heroX+13,this.heroY+10,4,0,360,false);<br /> cxt.fill();<br /> cxt.closePath();<br /> cxt.beginPath();<br /> cxt.lineWidth=2;<br /> cxt.strokeStyle="#FDD900";<br /> cxt.moveTo(this.heroX+10,this.heroY+10);<br /> if(this.dire==1){<br /> cxt.lineTo(this.heroX+26,this.heroY+10);<br /> }else{<br /> cxt.lineTo(this.heroX,this.heroY+10);<br /> }<br /> cxt.closePath();<br /> cxt.stroke();<br /> break;<br /> }<br /> }<br /> this.bullet=function(){<br /> cxt.fillStyle='#fff';<br /> if(bulletX>=600||bulletX<=0||bulletY>=400||bulletY<=0){<br /> clearInterval(timer2);<br /> yes=false;<br /> }<br /> switch (bulleDire) {<br /> case 0:<br /> cxt.fillRect(bulletX+9,bulletY,2,2);<br /> bulletY-=this.speed;<br /> break;<br /> case 1:<br /> cxt.fillRect(bulletX+24,bulletY+9,2,2);<br /> bulletX+=this.speed;<br /> break;<br /> case 2:<br /> cxt.fillRect(bulletX+9,bulletY+24,2,2);<br /> bulletY+=this.speed;<br /> break;<br /> case 3:<br /> cxt.fillRect(bulletX,bulletY+9,2,2);<br /> bulletX-=this.speed;<br /> break;<br /> }<br /> }<br /> }<br /> <br /> var hero=new drawHero(heroX,heroY,dire,speed);<br /> <br /> hero.move();<br /> window.onkeydown=function(e){<br /> var event=event||e;<br /> switch(event.keyCode){<br /> case 38://向上<br /> hero.heroY-=hero.speed;<br /> hero.dire=0;<br /> break;<br /> case 39://向右<br /> hero.heroX+=hero.speed;<br /> hero.dire=1;<br /> break;<br /> case 40://向下<br /> hero.heroY+=hero.speed;<br /> hero.dire=2;<br /> break;<br /> case 37://向左<br /> hero.heroX-=hero.speed;<br /> hero.dire=3;<br /> break;<br /> case 32://发子弹<br /> bulletX=hero.heroX;<br /> bulletY=hero.heroY;<br /> bulleDire=hero.dire;<br /> timer2=setInterval(hero.bullet,50);<br /> break;<br /> }<br /> }<br /> var timer=setInterval(function() {<br /> cxt.clearRect(0,0,600,400);<br /> hero.move();<br /> }, 100);<br /> </script><br /> </body><br /> </html><br />
运行代码
您可以修改框中代码后运行查看
HTML5在线画图板支持保存图片到本地，点击查看实例
发表评论：
昵称
邮件地址 (选填)
个人主页 (选填)
内容