html5 canvas 2d 绘图学习笔记

html5 canvas 2d 绘图 共15个 最终效果图如下：

图1矩形 图2直线 图3 圆 图4文字 图5径向渐变 图6圆渐变

图7直线绘制菊花 图8平移 图9缩放 图10旋转 图11 覆盖（setInterval动画） 图12给图形绘制阴影

图13drawImage绘图 图14星形裁剪 图15圆形裁剪

  <meta charset="UTF-8">
    <title>Html5 Canvas 2d</title>
 
 
 
    <canvas id="myCanvas1" width="200" height="100" style="border:1px solid #c3c3c3;">
        您的浏览器不支持 HTML5 canvas 标签。
    </canvas>
    <canvas id="myCanvas2" width="200" height="100" style="border:1px solid #c3c3c3;">
        您的浏览器不支持 HTML5 canvas 标签。
    </canvas>
    <canvas id="myCanvas3" width="200" height="100" style="border:1px solid #c3c3c3;">
        您的浏览器不支持 HTML5 canvas 标签。
    </canvas>
    <canvas id="myCanvas4" width="200" height="100" style="border:1px solid #c3c3c3;">
        您的浏览器不支持 HTML5 canvas 标签。
    </canvas>
    <canvas id="myCanvas5" width="200" height="100" style="border:1px solid #c3c3c3;">
        您的浏览器不支持 HTML5 canvas 标签。
    </canvas>
    <canvas id="myCanvas6" width="200" height="100" style="border:1px solid #c3c3c3;">
        您的浏览器不支持 HTML5 canvas 标签。
    </canvas>
    <canvas id="myCanvas7" width="200" height="100" style="border:1px solid #c3c3c3;">
        您的浏览器不支持 HTML5 canvas 标签。
    </canvas>
    <canvas id="myCanvas8" width="200" height="100" style="border:1px solid #c3c3c3;">
        您的浏览器不支持 HTML5 canvas 标签。
    </canvas>
    <canvas id="myCanvas9" width="200" height="100" style="border:1px solid #c3c3c3;">
        您的浏览器不支持 HTML5 canvas 标签。
    </canvas>
    <canvas id="myCanvas10" width="200" height="100" style="border:1px solid #c3c3c3;">
        您的浏览器不支持 HTML5 canvas 标签。
    </canvas>
    <canvas id="myCanvas11" width="200" height="100" style="border:1px solid #c3c3c3;">
        您的浏览器不支持 HTML5 canvas 标签。
    </canvas>
    <canvas id="myCanvas12" width="200" height="100" style="border:1px solid #c3c3c3;">
        您的浏览器不支持 HTML5 canvas 标签。
    </canvas>
    <canvas id="myCanvas13" width="410" height="300" style="border:1px solid #c3c3c3;">
        您的浏览器不支持 HTML5 canvas 标签。
    </canvas>
    <canvas id="myCanvas14" width="410" height="300" style="border:1px solid #c3c3c3;">
        您的浏览器不支持 HTML5 canvas 标签。
    </canvas>
    <canvas id="myCanvas15" width="410" height="300" style="border:1px solid #c3c3c3;">
        您的浏览器不支持 HTML5 canvas 标签。
    </canvas>
    <script>
        /*var context =canvas.getContext("2d");
        canvas元素绘制图像的时候有两种方法，分别是
        context.fill()//填充
        context.stroke()//绘制边框
        style:在进行图形绘制前，要设置好绘图的样式
        context.fillStyle//填充的样式
        context.strokeStyle//边框样式
        context.lineWidth//图形边框宽度*/
 
        //矩形
        /*绘制矩形 context.fillRect(x,y,width,height) strokeRect(x,y,width,height)
        清除矩形区域 context.clearRect(x,y,width,height)*/
        var c1=document.getElementById("myCanvas1");
        var ctx1=c1.getContext("2d");
        ctx1.fillStyle="#FF0000";
        ctx1.fillRect(0,0,180,80);
        var test=c1.toDataURL("image/png");
        c1.onclick=function(){
            //保存文件 canvas.toDataURL(MIME)
            window.open(test);
        }
        //直线
        var c2=document.getElementById("myCanvas2");
        var ctx2=c2.getContext("2d");
        ctx2.moveTo(0,0);
        ctx2.lineTo(200,100);
        ctx2.stroke();
 
        //圆
        /*圆弧context.arc(x, y, radius, starAngle,endAngle, anticlockwise)
        anticlockwise:是否逆时针（true）为逆时针，(false)为顺时针
        经过试验证明 ture是顺时针，false是逆时针是错误的，
        而且无论是逆时针还是顺时针，角度都沿着顺时针扩大*/
        var c3=document.getElementById("myCanvas3");
        var ctx3=c3.getContext("2d");       
        ctx3.beginPath();
        //arc(x,y,r,start,stop)
        ctx3.arc(95,50,40,0,1.5*Math.PI);
        ctx3.stroke();
 
        //文字
        var c4=document.getElementById("myCanvas4");
        var ctx4=c4.getContext("2d");
        ctx4.font="20px Arial";
        ctx4.fillText("Hello World",20,40);
        ctx4.strokeText("Hello World",80,80);
 
        //径向渐变
        var c5=document.getElementById("myCanvas5");
        var ctx5=c5.getContext("2d");
        //createLinearGradient(x,y,x1,y1) - 创建线条渐变
        //createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变
        var grd5=ctx5.createLinearGradient(0,0,200,0);
        grd5.addColorStop(0,"red");
        grd5.addColorStop(1,"white");
        ctx5.fillStyle=grd5;
        ctx5.fillRect(10,10,180,80);
 
        //圆渐变
        var c6=document.getElementById("myCanvas6");
        var ctx6=c6.getContext("2d");
        //createLinearGradient(x,y,x1,y1) - 创建线条渐变
        //createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变
        var grd6=ctx6.createRadialGradient(90,60,10,90,60,100);
        grd6.addColorStop(0,"red");
        grd6.addColorStop(1,"white");
        ctx6.fillStyle=grd6;
        ctx6.fillRect(10,10,180,80);
         
        //直线绘制菊花
        var c7 = document.getElementById("myCanvas7");
        var ctx7 = c7.getContext("2d");
        ctx7.fillStyle = "#FFFFFF";
        ctx7.fillRect(0, 0, 400, 300);
        var dx = 100;
        var dy = 50;
        var s = 50;
        ctx7.beginPath();
        ctx7.fillStyle = 'rgb(255,205,65)';
        ctx7.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);
            ctx7.lineTo(dx + x * s, dy + y * s);
        }
        ctx7.closePath();
        ctx7.fill();
        ctx7.stroke();
         
        /*1、平移context.translate(x,y)
        x:坐标原点向x轴方向平移x
        y:坐标原点向y轴方向平移y
        2、缩放context.scale(x,y)
        x:x坐标轴按x比例缩放
        y:y坐标轴按y比例缩放
        3、旋转context.rotate(angle)
        angle:坐标轴旋转x角度（角度变化模型和画圆的模型一样）*/
 
        var c8 = document.getElementById("myCanvas8");
        var ctx8 = c8.getContext("2d");
        ctx8.fillStyle = "#FFFFFF";
        ctx8.fillRect(0, 0, 400, 300);
        var dx1 = 100;
        var dy1 = 50;
        var s1 = 50;        
        ctx8.beginPath();
        ctx8.translate(50,5);
        ctx8.fillStyle = 'rgb(255,205,65)';
        ctx8.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);
            ctx8.lineTo(dx1 + x * s1, dy1 + y * s1);
        }       
        ctx8.closePath();
        ctx8.fill();
        ctx8.stroke();
 
        var c9 = document.getElementById("myCanvas9");
        var ctx9 = c9.getContext("2d");
        ctx9.fillStyle = "#FFFFFF";
        ctx9.fillRect(0, 0, 400, 300);
        var dx2 = 100;
        var dy2 = 50;
        var s2 = 50;        
        ctx9.beginPath();
        ctx9.scale(1.5,0.5);
        ctx9.fillStyle = 'rgb(255,205,65)';
        ctx9.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);
            ctx9.lineTo(dx2 + x * s2, dy2 + y * s2);
        }       
        ctx9.closePath();
        ctx9.fill();
        ctx9.stroke();
 
        var c10 = document.getElementById("myCanvas10");
        var ctx10 = c10.getContext("2d");
        ctx10.fillStyle = "#FFFFFF";
        ctx10.fillRect(0, 0, 400, 300);
        var dx3 = 100;
        var dy3 = 50;
        var s3 = 50;        
        ctx10.beginPath();
        ctx10.rotate(1);
        ctx10.fillStyle = 'rgb(255,205,65)';
        ctx10.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);
            ctx10.lineTo(dx3 + x * s3, dy3 + y * s3);
        }       
        ctx10.closePath();
        ctx10.fill();
        ctx10.stroke();
 
        var c11 = document.getElementById("myCanvas11");
        var ctx11 = c11.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++;
            }
            //蓝色矩形
            ctx11.fillStyle = "blue";
            ctx11.fillRect(10, 10, 60, 60);
            //设置组合方式 
            ctx11.globalCompositeOperation = oprtns[i];
            //设置新图形（红色圆形）
            ctx11.beginPath();
            ctx11.fillStyle = "red";
            ctx11.arc(60, 60, 30, 0, Math.PI * 2, false);
            ctx11.fill();
        }, 1000);
 
        /*给图形绘制阴影
        context.shadowOffsetX :阴影的横向位移量（默认值为0）
        context.shadowOffsetY :阴影的纵向位移量（默认值为0）
        context.shadowColor :阴影的颜色
        context.shadowBlur :阴影的模糊范围（值越大越模糊）*/
 
        var c12 = document.getElementById("myCanvas12");
        var ctx12 = c12.getContext('2d');
        ctx12.shadowOffsetX = 10;
        ctx12.shadowOffsetY = 10;
        ctx12.shadowColor = 'rgba(100,100,100,0.5)';
        ctx12.shadowBlur = 1.5;
        ctx12.fillStyle = 'rgba(255,0,0,0.5)';
        ctx12.fillRect(0, 0, 180, 80);
 
        /*绘图：context.drawImage
        图像平铺：context.createPattern(image,type) no-repeat:不平铺repeat-x:横方向平铺repeat-y:纵方向平铺repeat:全方向平铺
        图像裁剪：context.clip() 只绘制封闭路径区域内的图像，不绘制路径外部图像，用的时候先创建裁剪区域 再绘制图像
        像素处理：var imagedata=context.getImageData(sx,sy,sw,sh) sx:canvas的x轴坐标点 sy:canvas的y轴坐标点 sw:距离x的宽度 sh:距离y的高度
        设置像素颜色：context.putImageData(imagedata,dx,dy,dirtyX,dirtyY,dirtyWidth,dirtyHeight)
        imagedata:修改后的imagedata
        dx:重绘图像的起点横坐标
        dy:重绘图像的起点纵坐标
        //以下可选参数，设置重绘的矩形范围，如果缺省，默认会重绘所有的imegedata
        dirtyX:矩形左上角x轴坐标
        dirtyY:矩形左上角y轴坐标
        dirtyWidth:矩形长度
        dirtyHeight:矩形高度*/
        var image = new Image();
        image.src = "Hydrangeas.jpg";
        var c13 = document.getElementById("myCanvas13");
        var ctx13 = c13.getContext("2d");
        ctx13.fillStyle = "#EEEEFF";
        ctx13.fillRect(0, 0, 410, 300);
        image.onload = function () {
            // drawImage(image,x,y)
            //ctx13.drawImage(image,0,0);//这里取的是实际尺寸
            //drawImage(image,x,y,w,h)
            ctx13.drawImage(image,20, 20, 370, 260);//这里取的是缩放尺寸
            //drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)
            //ctx13.drawImage(image, 100, 100, 200, 150,50,50,300,200);//这里取的是实际尺寸
        }
         
 
        var c14 = document.getElementById("myCanvas14");
        var ctx14 = c14.getContext("2d");
        ctx14.fillStyle = "black";
        ctx14.fillRect(0, 0, 410, 300);
        var image2 = new Image();
        var j = 0;//组合效果编号
        image2.onload = function () {
            //圆形裁剪区
            //createCircleClip(ctx14)
            //星形裁剪区
            create5StarClip(ctx14);
            ctx14.drawImage(image2,20, 20, 370, 260);            
        }
        image2.src = "Koala.jpg";
 
        var c15 = document.getElementById("myCanvas15");
        var ctx15 = c15.getContext("2d");
        ctx15.fillStyle = "black";
        ctx15.fillRect(0, 0, 410, 300);
        var image3 = new Image();
        var j = 0;//组合效果编号
        image3.onload = function () {
            //圆形裁剪区
            createCircleClip(ctx15)
            ctx15.drawImage(image3,20, 20, 370, 260);       
        }
        image3.src = "Tulips.jpg";
 
        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);
            /*每个顶点到与中心连线之间的夹角α=（2π）/n = Math.PI / n * 2
            那么相间的两个顶点到与中心连线之间的夹角β=2α=4π/n=Math.PI / n * 4*/
            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 createCircleClip(context) {
            context.beginPath();
            context.arc(200, 150, 100, 0, Math.PI * 2, true);
            context.closePath();
            context.clip();
        }
 
        /*保存和恢复状态
        保存：context.save()保存当前context的状态、属性
        恢复：context.restore()恢复到save时候context的状态、属性*/
         
    </script>
 
<!--html>