Canvas画布

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Canvas画布</title>
    </head>
    <body>
        
        <img src="img/shuijiao.jpg" id="img1" width="400px" height="500px" style="display: none;" />
        <canvas id="canvas" width="1024" height="568" style="border: 1px solid black;">
            //浏览器不支持canvas,会显示文字!
            浏览器不支持!!!
        </canvas>
        
    </body>
    <script type="text/javascript">
        
        var canvas = document.getElementById("canvas");
        
        //导入上下文环境
        var cxt = canvas.getContext("2d");//2d绘图
        
        canvas.width = 1024;
        canvas.height= 568;
        
          cxt.beginPath();          //绘制直线          //确定直线两端点          cxt.moveTo(200,100);          cxt.lineTo(700,400);          cxt.lineTo(10,500);          cxt.lineTo(200,100);          cxt.closePath();                  //给直线加颜色          cxt.strokeStyle = "red";          //调用方法绘制直线          cxt.stroke();                  //声明填充颜色          cxt.fillStyle = "blue";          //调用方法填充          cxt.fill();                          cxt.beginPath();//设置分区          cxt.moveTo(400,100);          cxt.lineTo(800,500);          cxt.closePath();          cxt.lineWidth = 5;          cxt.strokeStyle = "green";          cxt.stroke();


        //定义字体
        //必须放在上面颜色填充才会起作用
        cxt.fillStyle = "blue";
        cxt.fill();
        
        cxt.font = "50px 微软雅黑";
        cxt.strokeText("Hello Girls",200,220);
        
        //给字体填充颜色
        cxt.fillText("Hello Boys",300,300);
        
        
        //线性渐变
        var grd = cxt.createLinearGradient(0,50,1024,0);//0,50起点  1024,0终点
        grd.addColorStop(0,"#FF00FF");
        grd.addColorStop(0.5,"#00FFFF");
        grd.addColorStop(1,"#FFFF00");
        
        cxt.fillStyle = grd;//填充什么颜色
        cxt.fillRect(0,0,1024,50);//1024矩形区域宽度;50矩形区域高度
        
        
        //圆弧
        /*500圆心X轴坐标,300圆心Y轴坐标,0起始弧度值,1.5*Math.PI,终止弧度值,false顺时针转*/
        cxt.lineWidth = 5;
        cxt.strokeStyle = "red";
        cxt.beginPath();
        cxt.arc(500,300,200,0,1.3*Math.PI,false);
        cxt.stroke();
        
        
        //一组圆弧
        for(var i=0; i<10;i++){
            cxt.beginPath();
            //50+i*100,圆心X轴坐标
            cxt.arc(50+i*100,100,40,0,2*Math.PI*(i+1)/10,false);
            //不是原型时图形不闭合,加了就可以让图形闭合起来
            cxt.closePath();
            cxt.stroke();
        }
        
        
        for(var i=0; i<10;i++){
            cxt.beginPath();
            cxt.arc(50+i*100,200,40,0,2*Math.PI*(i+1)/10,false);
            cxt.closePath();
            cxt.stroke();
            
            //填充颜色
            cxt.fillStyle = "aqua";
            cxt.fill();
        }
        
        
        //图片
        var img = document.getElementById("img1");
        //图片加载函数
        img.onload = function(){
            cxt.drawImage(img,300,100);
        }

        //移动 旋转效果
        cxt.fillStyle = "pink";
        cxt.fillRect(0,0,350,100);
        
        //参数一: 水平缩放   参数二: 垂直方向倾斜
        cxt.transform(1,0,0.5,1,50,10);
        cxt.fillStyle = "chocolate";
        cxt.fillRect(0,0,350,100);
        
        
        
        
        
    </script>
</html>
新学的cancas画布，每一部分都有相应代码即解释