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 相关文章推荐
jQuery 版本的文本输入框检查器Input Check
Jul 09 Javascript
jquery实现表格奇数偶数行不同样式(有图为证及实现代码)
Jan 23 Javascript
js控制页面控件隐藏显示的两种方法介绍
Oct 09 Javascript
JS实现程序暂停与继续功能代码解读
Oct 10 Javascript
在JS中解析HTML字符串示例代码
Apr 16 Javascript
学习JavaScript设计模式(单例模式)
Nov 26 Javascript
html+js实现简单的计算器代码(加减乘除)
Jul 12 Javascript
HTML5 canvas 9绘制图片实例详解
Sep 06 Javascript
javascript DOM的详解及实例代码
Mar 06 Javascript
vue 2.0项目中如何引入element-ui详解
Sep 06 Javascript
spirngmvc js传递复杂json参数到controller的实例
Mar 29 Javascript
解决vue项目,npm run build后,报路径错的问题
Aug 13 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
Ajax PHP简单入门教程代码
2008/04/25 PHP
php array_map()数组函数使用说明
2011/07/12 PHP
有关PHP中MVC的开发经验分享
2012/05/17 PHP
php DOS攻击实现代码(附如何防范)
2012/05/29 PHP
php解决约瑟夫环示例
2014/04/09 PHP
destoon实现调用自增数字从1开始的方法
2014/08/21 PHP
php实现的css文件背景图片下载器代码
2014/11/11 PHP
PHP读取大文件末尾N行的高效方法推荐
2016/06/03 PHP
解决Extjs4中form表单提交后无法进入success函数问题
2013/11/26 Javascript
node.js中的console.warn方法使用说明
2014/12/09 Javascript
JavaScript高级教程5.6之基本包装类型(详细)
2015/11/23 Javascript
Nodejs express框架一个工程中同时使用ejs模版和jade模版
2015/12/28 NodeJs
基于jquery实现图片上传本地预览功能
2016/01/08 Javascript
Jquery实现简单的轮播效果(代码管用)
2016/03/14 Javascript
jQuery使用cookie与json简单实现购物车功能
2016/04/15 Javascript
全面解析Javascript无限添加QQ好友原理
2016/06/15 Javascript
通过bootstrap全面学习less
2016/11/09 Javascript
javascript  数组排序与对象排序的实例
2017/07/17 Javascript
EasyUI的DataGrid绑定Json数据源的示例代码
2017/12/16 Javascript
angular6 利用 ngContentOutlet 实现组件位置交换(重排)
2018/11/02 Javascript
详解用vue2.x版本+adminLTE开源框架搭建后台应用模版
2019/03/15 Javascript
使用React-Router实现前端路由鉴权的示例代码
2020/07/26 Javascript
如何利用JavaScript编写更好的条件语句详解
2020/08/10 Javascript
[55:03]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第二场 11.20
2020/11/20 DOTA
浅谈python jieba分词模块的基本用法
2017/11/09 Python
详解Python匿名函数(lambda函数)
2019/04/19 Python
python 发送json数据操作实例分析
2019/10/15 Python
python Django 反向访问器的外键冲突解决
2020/05/20 Python
Python3开发环境搭建详细教程
2020/06/18 Python
Python selenium实现断言3种方法解析
2020/09/08 Python
西尔斯百货官网:Sears
2016/09/06 全球购物
资生堂英国官网:Shiseido英国
2020/12/30 全球购物
给分销商的致歉信
2014/01/14 职场文书
销售顾问工作计划书
2014/08/15 职场文书
交通事故一次性赔偿协议书范本
2014/11/02 职场文书
八年级作文之友情
2019/11/25 职场文书