五、 canvas绘制线、矩形、圆、图片、文字

标签兼容性查询https://caniuse.com/
1.canva能完成动画、游戏、图表、图像处理等原来需要Flash完成的功能，包括动态的2D和3D
2.画线
描边stroke
描边颜色strokeStyle
设置边宽度lineWidth
起点moveTo
终点lineTo

<!--新建画布-->
<canvas id="can"></canvas>
<script>
    //获取画布
    var can=document.getElementById("can");
    can.width=document.documentElement.clientWidth;
    can.height=document.documentElement.clientHeight;
    //转换为2D模式
    var xian=can.getContext("2d");
    //画线
    xian.lineWidth=10;
    xian.strokeStyle="red";
    xian.moveTo(0,0);
    xian.lineTo(200,200);
    xian.stroke();
</script>

<!--新建画布-->
<canvas id="can"></canvas>
<script>
    //获取画布
    var can=document.getElementById("can");
    can.width=document.documentElement.clientWidth;
    can.height=document.documentElement.clientHeight;
    //转换为2D模式
    var xian=can.getContext("2d");
    //自由画图
    xian.beginPath();
    xian.lineWidth=5;
    xian.strokeStyle="red";
    document.body.onmousedown=function(e){
        var x= e.clientX || e.pageX;
        var y= e.clientY || e.pageY;
        xian.moveTo(x,y);
        this.onmousemove=function(e){
            var x= e.clientX || e.pageX;
            var y= e.clientY || e.pageY;
            xian.lineTo(x,y);
            xian.stroke();
        }
    }
    document.body.onmouseup=function(){
        this.onmousemove=null;
    }
    xian.closePath();
</script>

3.画矩形
strokeRect(起始坐标x,起始坐标y,宽,高)
填充矩形fillRect(起始坐标x,起始坐标y,宽,高)
清除clearRect(起始坐标x,起始坐标y,宽,高);

    //画矩形
    xian.beginPath();
    xian.lineWidth=5;
    xian.strokeStyle="red";
    xian.fillStyle="yellow";
    xian.strokeRect(0,0,200,200);
    xian.stroke();
    xian.fillRect(0,0,200,200);
    xian.closePath();

4.画圆
arc(圆心x,圆心y,半径,开始角度,结束角度用Math.PI表示,true逆时针false顺时针)

    //画圆
    xian.beginPath();
    xian.lineWidth=5;
    xian.strokeStyle="red";
    xian.fillStyle="yellow";
    xian.arc(400,400,100,0,Math.PI*2,true);
    xian.stroke();
    xian.fill();
    xian.closePath();

    xian.beginPath();
    xian.strokeStyle="green";
    xian.fillStyle="green";
    xian.arc(400,380,120,0,Math.PI,true);
    xian.closePath();
    xian.stroke();
    xian.fill();
    xian.closePath();

    xian.beginPath();
    xian.strokeStyle="black";
    xian.arc(350,400,10,0,Math.PI*2,true);
    xian.arc(350,400,15,0,Math.PI*2,true);
    xian.closePath();
    xian.stroke();
    xian.closePath();

    xian.beginPath();
    xian.strokeStyle="black";
    xian.arc(450,400,10,0,Math.PI*2,true);
    xian.closePath();
    xian.stroke();
    xian.closePath();

    xian.beginPath();
    xian.strokeStyle="red";
    xian.arc(400,440,10,0,Math.PI,false);
    xian.closePath();
    xian.stroke();
    xian.closePath();

径向渐变createRadialGradient(起始x,起始y,起始半径,终止x,终止y,终止半径)
径向渐变颜色addColorStop(范围0~1,“颜色”)

    //渐变圆
    xian.beginPath();
    var jian=xian.createRadialGradient(400,400,10,400,400,100);
    jian.addColorStop(0,"red");
    jian.addColorStop(0.5,"pink");
    jian.addColorStop(1,"yellow");
    xian.fillStyle=jian;
    xian.arc(400,400,100,0,Math.PI*2,true);
    xian.fill();
    xian.closePath();

5.画图片
drawImage(元素名称,截取原图开始x,截取原图开始x,截取原图width,截取原图height,画图开始x,画图开始y,画图width,画图height）

    //画图片
    xian.beginPath();
    var img=document.createElement("img");
    img.src="../img/1.jpg";
    xian.drawImage(img,0,0,500,310,200,200,500,310);
    xian.closePath();

6.画文字
描边字strokeText(“文本内容”,起始x,起始y,最大长度)
实体字fillText(“文本内容”,起始x,起始y,最大长度)
字体样式font=“大小 字体”-------当设置了字体的时候大小才起作用

    //描边字
    xian.beginPath();
    xian.lineWidth=1;
    xian.strokeStyle="red";
    xian.font="50px yahei";
    xian.strokeText("wwwjjjkk",240,420,600);
    xian.closePath();

   //实体字
    xian.beginPath();
    xian.lineWidth=1;
    var jianbian=xian.createRadialGradient(240,420,0,240,420,300);
    jianbian.addColorStop(0,"red");
    jianbian.addColorStop(0.5,"pink");
    jianbian.addColorStop(1,"green");
    xian.fillStyle=jianbian;
    xian.font="50px yahei";
    xian.fillText("wwwjjjkk",240,420,600);
    xian.closePath();