HTML5CanvasAPI.htm

﻿<!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.lineWidth = 10;
            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 = 'red';
            context.fill();
            context.strokeStyle = 'blue'
            context.closePath();
            context.stroke();
            return
            //右侧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.lineWidth=10;
            context.stroke();
            context.lineWidth=10;
            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(1,1);
            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 = "Image/html5.jpg";
            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 = "Image/html5.jpg";
            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 = "Image/html5.jpg";
            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 = "Image/wordslogo.jpg";
            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 = "Image/html5.jpg"
        }

        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 = "Image/html5.jpg";

            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的状态
            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("image/jpeg"),"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>