canvas to realize 2D

Veröffentlicht am

canvas can render 3D,but this article is about 2d context

  • get element:var canvasEL=document.getElementById(“canvas”);
  • get context:var ctx=canvasEL.getContext(“2d”);
  • set edge style:ctx.strokeStyle=”#000”
  • set inner style:ctx.fillStyle=”#000”
  • line:ctx.beginPath();ctx.moveTo(0,0);ctx.lineTo(1,1);ctx.stroke();
  • inner circle:ctx.beginPath();ctx.arc(0,0,radius,0,2*Math.PI);ctx.fill();
  • edge circle:ctx.beginPath();ctx.arc(0,0,radius,0,2*Math.PI);ctx.stroke();
  • inner rectangle:ctx.fillRect(0,0,width,height);
  • inner rectangle:ctx.strokeRect(0,0,width,height);