初识canvas(画布)

canvas(画布)

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

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

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

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

使用canvas

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

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

     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);
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一:canvas简介 1.1什么是canvas? ①:canvas是HTML5提供的一种新标签 ②:HTML5 ...
    GreenHand1阅读 4,725评论 2 32
  • 一、canvas简介 1.1 什么是canvas?(了解) 是HTML5提供的一种新标签 Canvas是一个矩形区...
    Looog阅读 3,974评论 3 40
  • 一、canvas简介 1.1 什么是canvas?(了解) 是HTML5提供的一种新标签 Canvas是一个矩形区...
    J_L_L阅读 1,560评论 0 4
  • HTML5 中新增的一个相当于画布的标签,自带各种 API ,通过 JS 调用和搭配,实现图案绘制和想要的效果。 ...
    Primers阅读 1,462评论 0 1
  • 一、简介 HTML5 中的定义:“它是依赖分辨率的位图画布,你可以在 canvas 上面绘制任何图形,甚至加载照片...
    destiny0904阅读 10,603评论 1 4