zoukankan      html  css  js  c++  java

  • canvas学习笔记

    基本用法

    canvas 元素

    <canvas> 标签只有两个属性—— width 和 height ，默认初始化宽度为300像素和高度为150像素，推荐 width 和 height 属性为 <canvas> 明确规定宽高，而不是使用 CSS。

    渲染上下文（The rendering context）

    1
    2
    		 
    var canvas = document.getElementById('tutorial');
    var ctx = canvas.getContext('2d');

    代码的第一行通过使用 document.getElementById() 方法来为 <canvas>元素得到 DOM 对象。一旦有了元素对象，你可以通过使用它的 getContext() 方法来访问绘画上下文。

    检查支持性

    通过简单的测试getContext()方法的存在，脚本可以检查编程支持性

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

    绘制形状

    绘制矩形

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

    矩形（Rectangular）例子

    1
    2
    3
    4
    5
    6
    7
    8
    9
    		 
    function draw() {
      var canvas = document.getElementById('canvas');
      if (canvas.getContext) {
        var ctx = canvas.getContext('2d');
        ctx.fillRect(25, 25, 100, 100);
        ctx.clearRect(45, 45, 60, 60);
        ctx.strokeRect(50, 50, 50, 50);
      }
    }

    绘制路径

    beginPath()
    新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径。
    closePath()
    闭合路径之后图形绘制命令又重新指向到上下文中。
    stroke()
    通过线条来绘制图形轮廓。
    fill()
    通过填充路径的内容区域生成实心的图形。当你调用fill()函数时，所有没有闭合的形状都会自动闭合，所以你不需要调用closePath()函数。但是调用stroke()时不会自动闭合。

    绘制一个三角形

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    		 
    function draw() {
      var canvas = document.getElementById('canvas');
      if (canvas.getContext) {
        var ctx = canvas.getContext('2d');

        ctx.beginPath();
        ctx.moveTo(75, 50);
        ctx.lineTo(100, 75);
        ctx.lineTo(100, 25);
        ctx.fill();
      }
    }

    添加样式和颜色

    色彩

    fillStyle = color
    设置图形的填充颜色。
    strokeStyle = color
    设置图形轮廓的颜色。

    color 可以是表示 CSS 颜色值的字符串，渐变对象或者图案对象。
    注意: 一旦您设置了 strokeStyle 或者 fillStyle 的值，那么这个新值就会成为新绘制的图形的默认值。如果你要给每个图形上不同的颜色，你需要重新设置 fillStyle 或 strokeStyle 的值。

    1
    2
    3
    4
    5
    		 
    // 这些 fillStyle 的值均为 '橙色'
    ctx.fillStyle = "orange";
    ctx.fillStyle = "#FFA500";
    ctx.fillStyle = "rgb(255,165,0)";
    ctx.fillStyle = "rgba(255,165,0,1)";

    fillStyle 示例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    		 
    function draw() {
      var ctx = document.getElementById('canvas').getContext('2d');
      for (var i=0;i<6;i++){
        for (var j=0;j<6;j++){
          ctx.fillStyle = 'rgb(' + Math.floor(255-42.5*i) + ',' + 
                           Math.floor(255-42.5*j) + ',0)';
          ctx.fillRect(j*25,i*25,25,25);
        }
      }
    }

    strokeStyle 示例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    		 
    function draw() {
        var ctx = document.getElementById('canvas').getContext('2d');
        for (var i=0;i<6;i++){
          for (var j=0;j<6;j++){
            ctx.strokeStyle = 'rgb(0,' + Math.floor(255-42.5*i) + ',' + 
                             Math.floor(255-42.5*j) + ')';
            ctx.beginPath();
            ctx.arc(12.5+j*25,12.5+i*25,10,0,Math.PI*2,true);
            ctx.stroke();
          }
        }
      }

    透明度 Transparency

    globalAlpha = transparencyValue
    这个属性影响到 canvas 里所有图形的透明度，有效的值范围是 0.0 （完全透明）到 1.0（完全不透明），默认是 1.0。

    globalAlpha 属性在需要绘制大量拥有相同透明度的图形时候相当高效。不过，我认为下面的方法可操作性更强一点。

    因为 strokeStyle 和 fillStyle 属性接受符合 CSS 3 规范的颜色值，那我们可以用下面的写法来设置具有透明度的颜色。

    1
    2
    3
    		 
    // 指定透明颜色，用于描边和填充样式
    ctx.strokeStyle = "rgba(255,0,0,0.5)";
    ctx.fillStyle = "rgba(255,0,0,0.5)";

    globalAlpha 示例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    		 
    function draw() {
      var ctx = document.getElementById('canvas').getContext('2d');
      // 画背景
      ctx.fillStyle = '#FD0';
      ctx.fillRect(0,0,75,75);
      ctx.fillStyle = '#6C0';
      ctx.fillRect(75,0,75,75);
      ctx.fillStyle = '#09F';
      ctx.fillRect(0,75,75,75);
      ctx.fillStyle = '#F30';
      ctx.fillRect(75,75,75,75);
      ctx.fillStyle = '#FFF';

      // 设置透明度值
      ctx.globalAlpha = 0.2;

      // 画半透明圆
      for (var i=0;i<7;i++){
          ctx.beginPath();
          ctx.arc(75,75,10+10*i,0,Math.PI*2,true);
          ctx.fill();
      }
    }

    线型 Line styles

    渐变 Gradients

    图案样式 Patterns

    阴影 Shadows

    Canvas 填充规则

    绘制文本

    绘制文本

    fillText(text, x, y [, maxWidth])
    在指定的(x,y)位置填充指定的文本，绘制的最大宽度是可选的.
    strokeText(text, x, y [, maxWidth])
    在指定的(x,y)位置绘制文本边框，绘制的最大宽度是可选的.

    有样式的文本

    font = value
    当前我们用来绘制文本的样式. 这个字符串使用和 CSS font 属性相同的语法. 默认的字体是 10px sans-serif。
    textAlign = value
    文本对齐选项. 可选的值包括：start, end, left, right or center. 默认值是 start。
    textBaseline = value
    基线对齐选项. 可选的值包括：top, hanging, middle, alphabetic, ideographic, bottom。默认值是 alphabetic。
    direction = value
    文本方向。可能的值包括：ltr, rtl, inherit。默认值是 inherit。

    预测量文本宽度

    measureText()
    将返回一个 TextMetrics对象的宽度、所在像素，这些体现文本特性的属性。

    1
    2
    3
    4
    5
    		 
    function draw() {
      var ctx = document.getElementById('canvas').getContext('2d');
      var text = ctx.measureText("foo"); // TextMetrics object
      text.width; // 16;
    }
  • 相关阅读:
    Postman请求Https接口与认证
    HTML实用
    ORM实例教程_转
    web跨域问题CORS
    gin入门
    swagger应用
    k8s之容器
    腾讯高级工程师：如何从头开始写游戏服务器框架_转
    tensorflow入门
    sublime Text 3实用功能和常用快捷键收集
  • 原文地址：https://www.cnblogs.com/duanlibo/p/10969607.html
Copyright © 2011-2022 走看看