初识canvas(画布)

canvas(画布)

1、 HTML5提供的新元素
2、 Canvas在HTML页面提供画布的功能,可以在页面中绘制各种图形
3、 canvas绘制的图形与HTML页面无关

无法通过DOM获取绘制的图形   
无法为绘制的推行绑定DOM事件   

4、 只能使用canvas提供的API
5、 主要用途

   在HTML页面中绘制图标(例如柱状图、饼状图等)
   网页游戏 - Flash技术
   使用HTML5中的canvas    

使用canvas

1. 在页面中定义
   默认宽度 300*150
   效果上类似于div

   问题：
     定义canvas元素的宽度和高度
     style设置-绘制图形被拉伸
   解决方法：
      直接在canvas里写width 和height的值
   

2. 获取元素

    document.getElementsByTagName('canvas')[0];
    document.querySelector('canvas');
   

3. 获取画布对象

    getContext("2d");  
    参数类型是string类型，参数必须是“2d”或“3d”(固定写法)   
   

4. 使用Canvas提供的API

    context.fileRect(x,y,width,height);
   

Canvas(画布) - API使用

1. API提供的工具非常广泛，包括创建图形、颜色、文本等

2. 矩形

   1）绘制实心矩形

   fillRect(x,y,width,heigth)
   

   2）绘制空心矩形

   strokeRect(x,y,width,heigth)
   

   3）清除指定区域的像素，类似于橡皮擦

   clearRect(x,y,width,height)
   

3. 设置颜色 - 如果在创建图像时，没有指定颜色，那么所有图形都会使用纯黑色

   1）声明形状线条的颜色 - strokeStyle

   2）声明形状内部区域的颜色 - fillStyle

   3）透明度属性。可以设置画布上图形的透明度 - globalAlpha

4. 渐变效果 - canvas支持的渐变效果包括线性渐变或射线渐变，并且支持颜色转折点

   1）在画布上创建一个渐变对象

   var grd = context.createLinearGradient(x1,y1,x2,y2)
        x1,y1 - 基准线的起点坐标值
        x2,y2 - 基准线的终点坐标值
   
   var grd = context.createRadialGradient(x1,y1,r1,x2,y2,r2) 
        x1,y1 - 第一个基准圆的元素坐标值
        r1 - 第一个基准圆的半径
   
     x2,y2,r2同上
   
   返回一个渐变对象
   

*** 注意：上面所有的坐标都是相对于 canvas对象的坐标 ***
2）给渐变对象指定渐变颜色值

      addColorStop(position,color)
      position - 指设置渐变颜色的位置(0-1)

  3） 将渐变对象作为画布对象的颜色

      context.fillStyle = grd;

  4） 绘制矩形

       context.fillRect(0,0,400,400);