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>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
教你如何解密js/vbs/vbscript加密的编码异处理小结
Jun 25 Javascript
仿校内登陆框,精美,给那些很厉害但是没有设计天才的程序员
Nov 24 Javascript
Javascript中的默认参数详解
Oct 22 Javascript
简单纯js实现点击切换TAB标签实例
Aug 23 Javascript
js实现带圆角的两级导航菜单效果代码
Aug 24 Javascript
JavaScript易错知识点整理
Dec 05 Javascript
浅析Vue中method与computed的区别
Mar 06 Javascript
基于node搭建服务器,写接口,调接口,跨域的实例
May 13 Javascript
vue 项目 iOS WKWebView 加载
Apr 17 Javascript
如何让微信小程序页面之间的通信不再变困难
Jun 03 Javascript
Vue文本模糊匹配功能如何实现
Jul 30 Javascript
JavaScript十大取整方法实例教程
Dec 03 Javascript
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
You might like
PHP isset()与empty()的使用区别详解
2010/08/29 PHP
PHP判断数据库中的记录是否存在的方法
2014/11/14 PHP
Docker 如何布置PHP开发环境
2016/06/21 PHP
php删除txt文件指定行及按行读取txt文档数据的方法
2017/01/30 PHP
Laravel创建数据库表结构的例子
2019/10/09 PHP
在页面加载完成后通过jquery给多个span赋值
2014/05/21 Javascript
js闭包实例汇总
2014/11/09 Javascript
SpringMVC框架下JQuery传递并解析Json格式的数据是如何实现的
2015/12/10 Javascript
jQuery Chart图表制作组件Highcharts用法详解
2016/06/01 Javascript
js中window.open的参数及注意注意事项
2016/07/06 Javascript
axios拦截设置和错误处理方法
2018/03/05 Javascript
Vue实现按钮旋转和移动位置的实例代码
2018/08/09 Javascript
vue-cli 3.0 版本与3.0以下版本在搭建项目时的区别详解
2018/12/11 Javascript
微信小程序和百度的语音识别接口详解
2019/05/06 Javascript
vue实现点击追加选中样式效果
2019/11/01 Javascript
jQuery使用jsonp实现百度搜索的示例代码
2020/07/08 jQuery
python Django连接MySQL数据库做增删改查
2013/11/07 Python
使用Django的模版来配合字符串翻译工作
2015/07/27 Python
Python使用pandas和xlsxwriter读写xlsx文件的方法示例
2019/04/09 Python
Pandas透视表(pivot_table)详解
2019/07/22 Python
简单了解python中的与或非运算
2019/09/18 Python
python实现QQ邮箱发送邮件
2020/03/06 Python
Python的PIL库中getpixel方法的使用
2020/04/09 Python
Python正则表达式如何匹配中文
2020/05/27 Python
为中国消费者甄选天下优品:网易严选
2016/08/11 全球购物
加拿大高尔夫超市:Golf Town
2018/01/12 全球购物
澳大利亚设计的婴儿和女孩的衣服:Oobi
2018/12/16 全球购物
印度领先的眼镜电子商务网站:Lenskart
2019/12/16 全球购物
城市轨道专业个人求职信范文
2013/09/23 职场文书
物流专业毕业生推荐信范文
2013/11/18 职场文书
四查四看自我剖析材料
2014/09/19 职场文书
深入开展党的群众路线教育实践活动心得体会
2014/11/05 职场文书
电信营业员岗位职责
2015/04/14 职场文书
终止解除劳动合同证明书
2015/06/17 职场文书
MySQL学习总结-基础架构概述
2021/04/05 MySQL
python中 .npy文件的读写操作实例
2022/04/14 Python