Canvas基础

大道至简

html

index.html

    
      
      
       请升级浏览器
      

　　

js

canvas_demo.js

var canvas=document.getElementById("canvas");   var context=canvas.getContext("2d");canvas.width=document.body.clientWidth;canvas.height=document.body.clientHeight;context.beginPath()context.moveTo(0,0);context.lineTo(500,500);context.lineWidth=5;context.closePath()context.strokeStyle="red";context.stroke();context.beginPath()context.arc(500,200,150,0,2*Math.PI,true);context.closePath()context.strokeStyle="blue";context.stroke();context.beginPath()context.moveTo(800,200)context.lineTo(1200,100)context.lineTo(1400,500)context.closePath()context.fill()context.fillRect(1400,300,100,100)context.beginPath()context.moveTo(1400,100)context.lineTo(1600,400)context.closePath()var gnt1=context.createLinearGradient(1400,100,1600,400)gnt1.addColorStop(0,'red')gnt1.addColorStop(1,'yellow')context.strokeStyle=gnt1context.stroke()var gnt2=context.createLinearGradient(100,0,300,0)gnt2.addColorStop(0,'green')gnt2.addColorStop(0.5,'red')gnt2.addColorStop(1,'yellow')context.fillStyle=gnt2context.fillRect(100,600,200,100)context.beginPath()context.arc(600,800,100,0,1.5*Math.PI,true)context.closePath()context.stroke()var gtn=context.createRadialGradient(1200,600,50,1200,700,200)gtn.addColorStop(1,"blue")gtn.addColorStop(0,"red")context.fillStyle=gtncontext.fillRect(1000,500,400,400)

　　

demo