编程 Javascript
html5 canvas 详细使用教程

Posted in Javascript onJanuary 20, 2017
话不多说，请看代码
<!DOCTYPE html ">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <script type="text/javascript">
    function draw21(id) {
      var canvas = document.getElementById(id)
      if (canvas == null)
        return false;
      var context = canvas.getContext("2d");
      //实践表明在不设施fillStyle下的默认fillStyle=black
      context.fillRect(0, 0, 100, 100);
      //实践表明在不设施strokeStyle下的默认strokeStyle=black
      context.strokeRect(120, 0, 100, 100);
      //设置纯色
      context.fillStyle = "red";
      context.strokeStyle = "blue";
      context.fillRect(0, 120, 100, 100);
      context.strokeRect(120, 120, 100, 100);
      //设置透明度实践证明透明度值>0,<1值越低，越透明，值>=1时为纯色，值<=0时为完全透明
      context.fillStyle = "rgba(255,0,0,0.2)";
      context.strokeStyle = "rgba(255,0,0,0.2)";
      context.fillRect(240,0 , 100, 100);
      context.strokeRect(240, 120, 100, 100);
    }
    function draw22(id) {
      var canvas = document.getElementById(id)
      if (canvas == null)
        return false;
      var context = canvas.getContext("2d");
      //实践表明在不设施fillStyle下的默认fillStyle=black
      context.fillRect(0, 0, 100, 100);
      //实践表明在不设施strokeStyle下的默认strokeStyle=black
      context.strokeRect(120, 0, 100, 100);
      //设置纯色
      context.fillStyle = "red";
      context.strokeStyle = "blue";
      context.fillRect(0, 120, 100, 100);
      context.strokeRect(120, 120, 100, 100);
      //设置透明度实践证明透明度值>0,<1值越低，越透明，值>=1时为纯色，值<=0时为完全透明
      context.fillStyle = "rgba(255,0,0,0.2)";
      context.strokeStyle = "rgba(255,0,0,0.2)";
      context.fillRect(240, 0, 100, 100);
      context.strokeRect(240, 120, 100, 100);
      context.clearRect(50, 50, 240, 120);
    }
    function draw23(id) {
      var canvas = document.getElementById(id);
      if (canvas == null) {
        return false;
      }
      var context = canvas.getContext('2d');
      var n = 0;
      //左侧1/4圆弧
      context.beginPath();
      context.arc(100, 150, 50, 0, Math.PI/2 , false);
      context.fillStyle = 'rgba(255,0,0,0.25)';
      context.fill();
      context.strokeStyle = 'rgba(255,0,0,0.25)'
      context.closePath();
      context.stroke();
      //右侧1/4圆弧
      context.beginPath();
      context.arc(300, 150, 50, 0, Math.PI/2 , false);
      context.fillStyle = 'rgba(255,0,0,0.25)';
      context.fill();
      context.strokeStyle = 'rgba(255,0,0,0.25)';
      context.closePath();
      context.stroke();
    }
    function draw0(id) {
      var canvas = document.getElementById(id);
      if (canvas == null) {
        return false;
      }
      var context = canvas.getContext('2d');
      context.beginPath();
      context.arc(200, 150, 100, 0, Math.PI * 2, true);
      //不关闭路径路径会一直保留下去，当然也可以利用这个特点做出意想不到的效果
      context.closePath();
      context.fillStyle = 'rgba(0,255,0,0.25)';
      context.fill();
    }
    function draw1(id) {
      var canvas = document.getElementById(id);
      if (canvas == null)
        return false;
      var context = canvas.getContext("2d");
      context.fillStyle = "#EEEEFF";
      context.fillRect(0, 0, 400, 300);
      var n = 0;
      var dx = 150;
      var dy = 150;
      var s = 100;
      context.beginPath();
      context.fillStyle = 'rgb(100,255,100)';
      context.strokeStyle = 'rgb(0,0,100)';
      var x = Math.sin(0);
      var y = Math.cos(0);
      var dig = Math.PI / 15 * 11;
      for (var i = 0; i < 30; i++) {
        var x = Math.sin(i * dig);
        var y = Math.cos(i * dig);
        context.lineTo(dx + x * s, dy + y * s);
      }
      context.closePath();
      context.fill();
      context.stroke();
    }
    function draw2(id) {
      var canvas = document.getElementById(id);
      if (canvas == null) {
        return false;
      }
      var context = canvas.getContext("2d");
      context.fillStyle = "#EEEFF";
      context.fillRect(0, 0, 400, 300);
      var n = 0;
      var dx = 150;
      var dy = 150;
      var s = 100;
      context.beginPath();
      context.globalCompositeOperation = 'and';
      context.fillStyle = 'rgb(100,255,100)';
      var x = Math.sin(0);
      var y = Math.cos(0);
      var dig = Math.PI / 15 * 11;
      context.moveTo(dx, dy);
      for (var i = 0; i < 30; i++) {
        var x = Math.sin(i * dig);
        var y = Math.cos(i * dig);
        context.bezierCurveTo(dx + x * s, dy + y * s - 100, dx + x * s + 100, dy + y * s, dx + x * s, dy + y * s);
      }
      context.closePath();
      context.fill();
      context.stroke();
    }
    function draw24(id) {
      var canvas = document.getElementById(id);
      if (canvas == null) {
        return false;
      }
      var context = canvas.getContext("2d");
      context.moveTo(50, 50);
      context.bezierCurveTo(50, 50,150, 50, 150, 150);
      context.stroke();
      context.quadraticCurveTo(150, 250, 250, 250);
      context.stroke();
    }
    function draw25(id) {
      var canvas = document.getElementById(id);
      if (canvas == null)
        return false;
      var context = canvas.getContext('2d');
      var g1 = context.createLinearGradient(0, 0, 0, 300);
      g1.addColorStop(0, 'rgb(255,0,0)'); //红 
      g1.addColorStop(0.5, 'rgb(0,255,0)');//绿
      g1.addColorStop(1, 'rgb(0,0,255)'); //蓝
      //可以把lg对象理解成GDI中线性brush
      context.fillStyle = g1;
      //再用这个brush来画正方形
      context.fillRect(0, 0, 400, 300); 
    }
    function draw3(id) {
      var canvas = document.getElementById(id);
      if (canvas == null)
        return false;
      var context = canvas.getContext('2d');
      var g1 = context.createLinearGradient(0, 0, 0, 300);  
      g1.addColorStop(0,'rgb(255,255,0)');//浅绿 
      g1.addColorStop(1,'rgb(0,255,255)');//浅蓝
      context.fillStyle = g1;
      context.fillRect(0, 0, 400, 300);
      var n = 0;
      var g2 = context.createLinearGradient(0, 0, 300, 0);
      g2.addColorStop(0, 'rgba(0,0,255,0.5)');//蓝色
      g2.addColorStop(1, 'rgba(255,0,0,0.5)');//红色
      for (var i = 0; i < 10; i++) {
        context.beginPath();
        context.fillStyle = g2;
        context.arc(i * 25, i * 25, i * 10, 0, Math.PI * 2, true);
        context.closePath();
        context.fill();
      }
    }
    function draw26(id) {
      //同一个圆心画球型
      /*var canvas = document.getElementById(id);
      if (canvas == null)
        return false;
      var context = canvas.getContext('2d');
      var g1 = context.createRadialGradient(200, 150, 0, 200, 150, 100);
      g1.addColorStop(0.1, 'rgb(255,0,0)'); 
      g1.addColorStop(1, 'rgb(50,0,0)');
      context.fillStyle = g1;
      context.beginPath();
      context.arc(200, 150, 100, 0, Math.PI * 2, true);
      context.closePath();
      context.fill();*/
      //不同圆心看径向渐变模型
      var canvas = document.getElementById(id);
      if (canvas == null)
      return false;
      var context = canvas.getContext('2d');
      var g1 = context.createRadialGradient(100, 150, 10, 300, 150, 50);
      g1.addColorStop(0.1, 'rgb(255,0,0)');
      g1.addColorStop(0.5, 'rgb(0,255,0)');
      g1.addColorStop(1, 'rgb(0,0,255)');
      context.fillStyle = g1;
      context.fillRect(0, 0, 400, 300);
    }
    function draw27(id) {
      var canvas = document.getElementById(id);
      if (canvas == null)
        return false;
      var context = canvas.getContext('2d');
      context.shadowOffsetX = 10;
      context.shadowOffsetY = 10;
      context.shadowColor = 'rgba(100,100,100,0.5)';
      context.shadowBlur = 1.5;
      context.fillStyle = 'rgba(255,0,0,0.5)';
      context.fillRect(100, 100, 200, 100);
    }
    function draw4(id) {
      var canvas = document.getElementById(id);
      if (canvas == null)
        return false;
      var context = canvas.getContext('2d');
      var g1 = context.createRadialGradient(400, 0, 0, 400, 0, 400);
      g1.addColorStop(0.1, 'rgb(255,255,0)');
      g1.addColorStop(0.3, 'rgb(255,0,255)');
      g1.addColorStop(1, 'rgb(0,255,255)');
      context.fillStyle = g1;
      context.fillRect(0, 0, 400, 300);
      var n = 0;
//      var g2 = context.createRadialGradient(250, 250, 0, 250, 250, 300);
//      g2.addColorStop(0.1, 'rgba(255,0,0,0.5)');
//      g2.addColorStop(0.7, 'rgba(255,255,0,0.5)');
//      g2.addColorStop(1, 'rgba(0,0,255,0.5)');
      for (var i = 0; i < 10; i++) {
        var g2 = context.createRadialGradient(i * 25, i * 25, 0, i * 25, i * 25, i * 10);
        g2.addColorStop(0.1, 'rgba(255,0,0,0.5)');
        g2.addColorStop(0.7, 'rgba(255,255,0,0.5)');
        g2.addColorStop(1, 'rgba(0,0,255,0.5)');
        context.beginPath();
        context.fillStyle = g2;
        context.arc(i * 25, i * 25, i * 10, 0, Math.PI * 2, true);
        context.fill();
      }
    }
    function draw5(id) {
      var canvas = document.getElementById(id);
      if (canvas == null)
        return false;
      var context = canvas.getContext("2d");
      context.save(); //保存了当前context的状态
      context.fillStyle = "#EEEEFF";
      context.fillRect(0, 0, 400, 300);
      context.fillStyle = "rgba(255,0,0,0.1)";
      //平移 缩放 旋转 1 2 3    
      context.translate(100, 100);
      context.scale(0.5, 0.5);
      context.rotate(Math.PI / 4);
      context.fillRect(0, 0, 100, 100);
      context.restore(); //恢复到刚刚保存的状态,保存恢复只能使用一次
      context.save(); //保存了当前context的状态
      context.fillStyle = "rgba(255,0,0,0.2)";
      //平移 旋转 缩放 1 3 2
      context.translate(100, 100);
      context.rotate(Math.PI / 4);
      context.scale(0.5, 0.5);
      context.fillRect(0, 0, 100, 100);
      context.restore(); //恢复到刚刚保存的状态
      context.save(); //保存了当前context的状态
      context.fillStyle = "rgba(255,0,0,0.3)";
      //缩放 平移 旋转 2 1 3 
      context.scale(0.5, 0.5);
      context.translate(100, 100);
      context.rotate(Math.PI / 4);
      context.fillRect(0, 0, 100, 100);
      context.restore(); //恢复到刚刚保存的状态
      context.save(); //保存了当前context的状态
      context.fillStyle = "rgba(255,0,0,0.4)";
      //缩放 旋转 平移 2 3 1 
      context.scale(0.5, 0.5);
      context.rotate(Math.PI / 4);
      context.translate(100, 100);
      context.fillRect(0, 0, 100, 100);
      context.restore(); //恢复到刚刚保存的状态
      context.save(); //保存了当前context的状态
      context.fillStyle = "rgba(255,0,0,0.5)";
      //旋转 平移 缩放 3 1 2 
      context.rotate(Math.PI / 4);
      context.translate(100, 100);
      context.scale(0.5, 0.5);
      context.fillRect(0, 0, 100, 100);
      context.restore(); //恢复到刚刚保存的状态
      context.save(); //保存了当前context的状态
      context.fillStyle = "rgba(255,0,0,1)";
      //旋转 缩放 平移  3 2 1 
      context.rotate(Math.PI / 4);
      context.scale(0.5, 0.5);
      context.translate(100, 100);
      context.fillRect(0, 0, 100, 100);
      //实验表明应该移动的是坐标轴
      //实验表明缩放的是坐标轴比例
      //实验表明旋转的是坐标轴
      //综合上述，因此平移 缩放 旋转 三者的顺序不同都将画出不同的结果
    }
    function draw6(id) {
      var canvas = document.getElementById(id);
      if (canvas == null)
        return false;
      var context = canvas.getContext('2d');
      context.fillStyle = "#EEEEFF";
      context.fillRect(0, 0, 400, 300);
      //图形绘制
      context.translate(200, 50);
      context.fillStyle = 'rgba(255,0,0,0.25)';
      for (var i = 0; i < 50; i++) {
        //实验表明translate、scale、rotate都是在原有的context属性上调整的
        context.translate(25, 25);
        context.scale(0.95, 0.95);
        context.rotate(Math.PI / 10);
        context.fillRect(0, 0, 100, 50);
      }
    }
    function draw7(id) {
      var canvas = document.getElementById(id);
      var context = canvas.getContext("2d");
      context.fillStyle = "#EEEEFF";
      context.fillRect(0, 0, 400, 300);
      //图形绘制
      context.translate(200, 50);
      for (var i = 0; i < 50; i++) {
        context.translate(25, 25);
        context.scale(0.95, 0.95);
        context.rotate(Math.PI / 10);
        create5Star(context);
        context.fill();
      }
    }
    function draw8(id) {
      var canvas = document.getElementById(id);
      if (canvas == null)
        return false;
      var context = canvas.getContext("2d");
      //context.beginPath();
      context.strokeStyle = "rgb(250,0,0)";
      context.fillStyle = "rgb(250,0,0)"
      //实验证明第一次lineTo的时候和moveTo功能一样
      context.lineTo(100, 100);
      //之后的lineTo会以上次lineTo的节点为开始
      context.lineTo(200, 200);
      context.lineTo(200, 100);
      context.moveTo(200, 50);
      context.lineTo(100,50);
      context.stroke();
    }
    function draw9(id) {
      var canvas = document.getElementById(id);
      if (canvas == null)
        return false;
      var context = canvas.getContext("2d");
      //定义颜色
      var colors = ["red", "orange", "yellow", "green", "blue", "navy", "perple"];
      //定义线宽
      context.lineWidth = 10;
      context.transform(1,0,0,1,100,0)
      //循环绘制圆弧
      for (var i = 0; i < colors.length; i++) {
        //定义每次向下移动10个像素的变换矩阵
        context.transform(1, 0, 0, 1, 0, 10);
        //设定颜色
        context.strokeStyle = colors[i];
        context.beginPath();
        context.arc(50, 100, 100, 0, Math.PI, true);
        context.stroke();
      }
    }
    function draw10(id) {
      var canvas = document.getElementById(id);
      if (canvas == null) {
        return false;
      }
      var context = canvas.getContext("2d");
      var oprtns = new Array(
      "source-over",
      "destination-over",
      "source-in",
      "destination-in",
      "source-out",
      "destination-out",
      "source-atop",
      "destination-atop",
      "lighter",
      "xor",     
      "copy"
      );
      var i = 0;//组合效果编号
      //结合setinterval动态显示组合
      var interal = setInterval(function () {
        if (i == 10) {
          i=0;
        }
        else {
          i++;
        }
        //每次重绘前清空
        context.clearRect(0,0,400,300)
        //蓝色矩形
        context.fillStyle = "blue";
        context.fillRect(10, 10, 60, 60);
        //设置组合方式 
        context.globalCompositeOperation = oprtns[i];
        //设置新图形（红色圆形）
        context.beginPath();
        context.fillStyle = "red";
        context.arc(60, 60, 30, 0, Math.PI * 2, false);
        context.fill();
     }, 1000);
    }
    function create5Star(context) {
      var n = 0;
      var dx = 100;
      var dy = 0;
      var s = 50;
      //创建路径
      context.beginPath();
      context.fillStyle = 'rgba(255,0,0,0.5)';
      var x = Math.sin(0);
      var y = Math.cos(0);
      var dig = Math.PI / 5 * 4;
      for (var i = 0; i < 5; i++) {
        var x = Math.sin(i * dig);
        var y = Math.cos(i * dig);
        context.lineTo(dx + x * s, dy + y * s);
      }
      context.closePath();
    }
    function draw11(id) {
      var canvas = document.getElementById(id);
      if (canvas == null)
        return false;
      var context = canvas.getContext("2d");
      context.fillStyle = "#EEEEFF";
      context.fillRect(0, 0, 400, 300);
      context.shadowOffsetX = 10;
      context.shadowOffsetY = 10;
      context.shadowColor = 'rgba(100,100,100,0.5)';
      context.shadowBlur =5;
      //图形绘制
      context.translate(0, 50);
      for (var i = 0; i < 3; i++) {
        context.translate(50, 50);
        create5Star(context);
        context.fill();
      }
    }
    //drawImage(image,x,y)
    function draw28(id) {
      var image = new Image();
      image.src = "http://pic002.cnblogs.com/images/2012/407398/2012080410383846.png";
      var canvas = document.getElementById(id);
      if (canvas == null)
        return false;
      var context = canvas.getContext("2d");
      context.fillStyle = "#EEEEFF";
      context.fillRect(0, 0, 400, 300);
      image.onload = function () {
        context.drawImage(image,0,0);
      }
    }
    //drawImage(image,x,y,w,h)
    function draw12(id) {
      var image = new Image();
      image.src = "http://pic002.cnblogs.com/images/2012/407398/2012080410383846.png";
      var canvas = document.getElementById(id);
      if (canvas == null)
        return false;
      var context = canvas.getContext("2d");
      context.fillStyle = "#EEEEFF";
      context.fillRect(0, 0, 400, 300);
      image.onload = function () {
        context.drawImage(image, 50, 50, 300, 200);
      }
    }
    //drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)
    function draw13(id){
      var image = new Image();
      image.src = "http://pic002.cnblogs.com/images/2012/407398/2012080410383846.png";
      var canvas = document.getElementById(id);

      if (canvas == null)
        return false;
      var context = canvas.getContext("2d");
      context.fillStyle = "#EEEEFF";

      context.fillRect(0, 0, 400, 300);
      image.onload = function () {
        context.drawImage(image, 100, 100, 200, 150,50,50,300,200);//这里取的是实际尺寸
      }
    }
    function draw14(id) {
      //传统的平铺是用for循环来处理的，现在直接调用接口
      var image = new Image();
      var canvas = document.getElementById(id);
      if (canvas == null)
        return false;
      var context = canvas.getContext("2d");
      var type = ["no-repeat", "repeat-x", "repeat-y", "repeat"];
      var i = 0;
      image.src = "http://pic002.cnblogs.com/images/2012/407398/2012080410383846.png";
      image.onload = function () {
        var interval = setInterval(function () {
          //每次转换平铺类型清空
          context.clearRect(0, 0, 400, 300);
          if (i >= 4) {
            i = 0;
          }
          var ptrn = context.createPattern(image, type[i]);
          context.fillStyle = ptrn;
          context.fillRect(0, 0, 400, 300);
          i++;
        }, 1000);
      };
    }
    //图像裁剪
    function draw15(id) {
      var canvas = document.getElementById(id);
      if (canvas == null)
        return false;
      var context = canvas.getContext("2d");
      context.fillStyle = "black";
      context.fillRect(0, 0, 400, 300);
      image = new Image();
      image.onload = function () {
        drawImg(context,image);
      }
      image.src = "http://pic002.cnblogs.com/images/2012/407398/2012080410383846.png"
    }
    function drawImg(context, image) {
      //圆形裁剪区
      //createCircleClip(context)
      //星形裁剪区
      create5StarClip(context);
      context.drawImage(image,0,0);
    }
    function createCircleClip(context) {
      context.beginPath();
      context.arc(200, 150, 100, 0, Math.PI * 2, true);
      context.closePath();
      context.clip();
    }
    function create5StarClip(context) {
      var n = 0;
      var dx = 200;
      var dy = 135;
      var s = 150;
      context.beginPath();
      var x = Math.sin(0);
      var y = Math.cos(0);
      var dig = Math.PI / 5 * 4;
      for (var i = 0; i < 5; i++) {
        var x = Math.sin(i * dig);
        var y = Math.cos(i * dig);
        context.lineTo(dx + x * s, dy + y * s);
      }
      context.closePath();
      context.clip();
    }
    function draw16(id) {
      var canvas = document.getElementById(id);
      if (canvas == null)
        return false;
      var context = canvas.getContext("2d");
      context.fillStyle = 'red'
      //在右下角画一个正方形
      context.fillRect(250,250,150,50);
      var image = new Image();
      image.src = "http://pic002.cnblogs.com/images/2012/407398/2012080410383846.png";
      image.onload = function () {
        //在左上角画一幅图片
        context.drawImage(image, 0, 0,200,200);
        //实验证明imagedata取的是canvas所在范围画的图形，不止是图片
        //不会取该区域内是空白的canvas的像素
        var imagedata = context.getImageData(0, 0, 400, 300);
        //修改imagedata
        for (var i = 0, n = imagedata.data.length; i < n; i += 4) {
          imagedata.data[i + 0] = 255 - imagedata.data[i + 0]; //red;
          imagedata.data[i + 1] = 255 - imagedata.data[i + 1]; //green
          imagedata.data[i + 2] = 255 - imagedata.data[i + 2]; //blue
          //imagedata.data[i + 3] = 255 - imagedata.data[i + 3]; //a
        }
        context.putImageData(imagedata,0 ,0,100,100,300,200);
      }
    }
    function draw17(id) {
      var canvas = document.getElementById(id);
      if (canvas == null)
        return false;
      var context = canvas.getContext("2d");
      context.fillStyle = "#EEEEFF";
      context.fillRect(0,0,400,300);
      context.fillStyle = "#00f";
      context.font = "italic 30px sans-serif";
      context.textBaseline = 'top';
      //填充字符串
      var txt="fill示例文字"
      context.fillText(txt, 0, 0);
      var length=context.measureText(txt);
      context.fillText("长" + length.width + "px", 0, 50);
      context.font = "bolid 30px sans-serif";
      txt = "stroke示例文字";
      length = context.measureText(txt);
      context.strokeText(txt,0,100);
      context.fillText("长" + length.width + "px", 0, 150);
    }
    function draw18(id) {
      var canvas = document.getElementById(id);
      if (canvas == null)
        return false;
      var context = canvas.getContext("2d");
      context.fillStyle = "red";
      context.save(); //保存了当前context的状态
      context.fillStyle = "black";
      context.fillRect(0, 0, 100, 100);
      context.restore();//恢复到刚刚保存的状态
      context.fillRect(0,120,100,100);
    }
    function draw19(id) {
      var canvas = document.getElementById(id);
      if (canvas == null)
        return false;
      var context = canvas.getContext("2d");
      context.fillStyle = "rgb(0,0,225)";
      context.fillRect(0, 0, canvas.width, canvas.height);
      context.fillStyle = "rgb(255,255,0)";
      context.fillRect(10, 20, 50, 50);
      //把图像保存到新的窗口
      var w=window.open(canvas.toDataURL("http://pic002.cnblogs.com/images/2012/407398/2012080410383846.png"),"smallwin","width=400,height=350");
    }
    function draw20(id) {
      var canvas = document.getElementById(id);
      if (canvas == null)
        return false;
      var context = canvas.getContext("2d");
      var interal = setInterval(function () {
        move(context);
      }, 1);
    }
   var x = 100;//矩形开始坐标
    var y = 100;//矩形结束坐标
    var mx = 0;//0右1左
    var my = 0; //0下1上
    var ml = 1;//每次移动长度
    var w = 20;//矩形宽度
    var h = 20;//矩形高度
    var cw = 400;//canvas宽度
    var ch = 300; //canvas高度
    function move(context) {
      context.clearRect(0, 0, 400, 300);
      context.fillStyle = "#EEEEFF";
      context.fillRect(0, 0, 400, 300);
      context.fillStyle = "red";
      context.fillRect(x, y, w, h);    
      if (mx == 0) {
        x = x + ml;
        if (x >= cw-w) {
          mx = 1;
        }
      }
      else {
        x = x - ml;
        if (x <= 0) {
          mx = 0;
        }
      }
      if (my == 0) {
        y = y + ml;
        if (y >= ch-h) {
          my = 1;
        }
      }
      else {
        y = y - ml;
        if (y <= 0) {
          my = 0;
        }
      }
    }
    window.onload = function () {
      draw21("canvas21");
      draw22("canvas22");
      draw23("canvas23");
      draw24("canvas24");
      draw25("canvas25");
      draw26("canvas26");
      draw27("canvas27");
      draw28("canvas28");
      draw0("canvas0");
      draw1("canvas1");
      draw2("canvas2");
      draw3("canvas3");
      draw4("canvas4");
      draw5("canvas5");
      draw6("canvas6");
      draw8("canvas8");
      draw7("canvas7");
      draw9("canvas9");
      draw10("canvas10");
      draw11("canvas11");
      draw12("canvas12");
      draw13("canvas13");
      draw14("canvas14");
      draw15("canvas15");
      draw16("canvas16");
      draw17("canvas17");
      draw18("canvas18");
      draw19("canvas19");
      draw20("canvas20");
    }
  </script>
</head>
<body>
  <section><header><h1>画矩形</h1></header><canvas id="canvas21" width="400" height="300"></canvas></section>
  <section><header><h1>清除矩形</h1></header><canvas id="canvas22" width="400" height="300"></canvas></section>
  <section><header><h1>绘制路径</h1></header><canvas id="canvas23" width="400" height="300"></canvas></section>
  <section><header><h1>画圆()</h1></header><canvas id="canvas0" width="400" height="300"></canvas></section>
  <section><header><h1>画线test(lineTo moveTo)</h1></header><canvas id="canvas8" width="400" height="300"></canvas></section>
  <section><header><h1>画线demo(lineTo moveTo)</h1></header><canvas id="canvas1" width="400" height="300"></canvas></section>
  <section><header><h1>贝塞尔曲线test（bezierCurveTo）</h1></header><canvas id="canvas24" width="400" height="300"></canvas></section>
  <section><header><h1>贝塞尔曲线demo（bezierCurveTo）</h1></header><canvas id="canvas2" width="400" height="300"></canvas></section>
  <section><header><h1>线性test（createLinearGradient addColorStop）</h1></header><canvas id="canvas25" width="400" height="300"></canvas></section>
  <section><header><h1>线性demo（createLinearGradient addColorStop）</h1></header><canvas id="canvas3" width="400" height="300"></canvas></section>
  <section><header><h1>发散test（createRadialGradient）</h1></header><canvas id="canvas26" width="400" height="300"></canvas></section>
  <section><header><h1>发散demo（createRadialGradient）</h1></header><canvas id="canvas4" width="400" height="300"></canvas></section>
  <section><header><h1>平移 test（translate）缩放（scale） 旋转（rotate）</h1></header><canvas id="canvas5" width="400" height="300"></canvas></section>
  <section><header><h1>平移 demo（translate）缩放（scale） 旋转（rotate）</h1></header><canvas id="canvas6" width="400" height="300"></canvas></section>
  <section><header><h1>坐标与路径的结合使用</h1></header><canvas id="canvas7" width="400" height="300"></canvas></section>
  <section><header><h1>矩阵变换</h1></header><canvas id="canvas9" width="400" height="300"></canvas></section>
  <section><header><h1>图形组合叠加(globalCompositeOperation)</h1></header><canvas id="canvas10" width="400" height="300"></canvas></section>
  <section><header><h1>给图像绘制阴影test shadowOffsetX(阴影的横向位移量) shadowOffsetY(盈盈的纵向位移量) shadowColor（阴影的颜色） shadowBlur（阴影的模糊范围）</h1></header><canvas id="canvas27" width="400" height="300"></canvas></section>
  <section><header><h1>给图像绘制阴影demo shadowOffsetX(阴影的横向位移量) shadowOffsetY(盈盈的纵向位移量) shadowColor（阴影的颜色） shadowBlur（阴影的模糊范围）</h1></header><canvas id="canvas11" width="400" height="300"></canvas></section>
  <section><header><h1>绘制图像drawImage(image,x,y)</h1></header><canvas id="canvas28" width="400" height="300"></canvas></section>
  <section><header><h1>绘制图像drawImage(image,x,y,w,h)</h1></header><canvas id="canvas12" width="400" height="300"></canvas></section>
  <section><header><h1>绘制局部图像drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)</h1></header><canvas id="canvas13" width="400" height="300"></canvas></section>
  <section><header><h1>图像平铺</h1></header><canvas id="canvas14" width="400" height="300"></canvas></section>
  <section><header><h1>图像裁剪clip</h1></header><canvas id="canvas15" width="400" height="300"></canvas></section>
  <section><header><h1>像素处理getImageData</h1></header><canvas id="canvas16" width="400" height="300"></canvas></section>
  <section><header><h1>绘制文字fillText strokeText</h1></header><canvas id="canvas17" width="400" height="300"></canvas></section>
  <section><header><h1>绘图状态的保存save与恢复restore</h1></header><canvas id="canvas18" width="400" height="300"></canvas></section>
  <section><header><h1>保存文件canvas.toDataURL</h1></header><canvas id="canvas19" width="400" height="300"></canvas></section>
  <section><header><h1>简单动画</h1></header><canvas id="canvas20" width="400" height="300"></canvas></section>
</body>
</html>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持三水点靠木！
html5 canvas 详细使用教程
- Author -
59580
声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。
Javascript 相关文章推荐
jQuery的实现原理的模拟代码 -4 重要的扩展函数 extend
Aug 03 Javascript
jquery中输入验证中一个不错的效果
Aug 21 Javascript
jquery实现的可隐藏重现的靠边悬浮层实例代码
May 27 Javascript
javaScript中push函数用法实例分析
Jun 08 Javascript
基于jquery实现鼠标左右拖动滑块滑动附源码下载
Dec 23 Javascript
JS获取鼠标相对位置的方法
Sep 20 Javascript
微信小程序数组中的push与concat的区别
Jan 05 Javascript
Vue学习笔记进阶篇之函数化组件解析
Jul 21 Javascript
VUE v-for循环中每个item节点动态绑定不同函数的实例
Sep 26 Javascript
9种方法优化jQuery代码详解
Feb 04 jQuery
JS Canvas接口和动画效果大全
Apr 29 Javascript
vue实现拖拽交换位置
Apr 07 Vue.js
canvas绘制万花筒效果（代码分享）
Jan 20 #Javascript
原生js实现网页顶部自动下拉/收缩广告效果
Jan 20 #Javascript
Angular.js中ng-if、ng-show和ng-hide的区别介绍
Jan 20 #Javascript
轻松理解Javascript变量的相关问题
Jan 20 #Javascript
js+css3实现旋转效果
Jan 20 #Javascript
Bootstrap 手风琴菜单的实现代码
Jan 20 #Javascript
浅谈angularjs $http提交数据探索
Jan 20 #Javascript