canvas基础

Canvas基础

canvas在HTML中的代码

<canvas id="myCanvas" width="300" height="300">
//writing some words here while broswer do not support canvas.
//or some <img src="" alt="" /> is cool too.
</canvas>

canvas核心API

• 渲染上下文getContext()

 let ctx = document.getElementById("mycanvas").getContext("2d");

• 画布栅格
  
• 矩形绘制
  
  • fillRect(x , y , width , height)
    绘制一个填充的矩形
  • strokeRect(x , y , width , height)
    绘制一个矩形的边框
  • clearRect(x , y , width , height)
    清除指定矩形区域，让清除部分完全透明。
  • rect(x, y, width, height)
    绘制一个左上角坐标为（x,y），宽高为width以及height的矩形。当该方法执行的时候，moveTo()方法自动设置坐标参数（0,0）。也就是说，当前笔触自动重置回默认坐标。

function draw() {
   
 var canvas = document.getElementById('canvas');
 if (canvas.getContext) {
 var ctx = canvas.getContext('2d');

 ctx.fillRect(25,25,100,1