canvas学习笔记

一、基本用法

1、canvas 元素

  A、 元素有一个叫做 getContext() 的方法，这个方法是用来获得渲染上下文和它的绘画功能，通过简单的测试getContext()方法的存在，脚本可以检查编程支持性

var canvas = document.getElementById('tutorial');
if (canvas.getContext){
  var ctx = canvas.getContext('2d');
  // drawing code here
} else {
  // canvas-unsupported code here
}

二、绘制形状

1、绘制矩形

  fillRect(x, y, width, height)
  绘制一个填充的矩形
  strokeRect(x, y, width, height)
  绘制一个矩形的边框
  clearRect(x, y, width, height)
  清除指定矩形区域，让清除部分完全透明。

function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');
    ctx.fillRect(25,25,100,100);//函数绘制了一个边长为100px的黑色正方形
    ctx.clearRect(45,45,60,60);//函数从正方形的中心开始擦除了一个60*60px的正方形
    ctx.strokeRect(50,50,50,50);//在清除区域内生成一个50*50的正方形边框。
  }
}