canvas的基本学习(画圆弧，矩形，线条等)（一）

飞熊 • 2023年7月14日下午4:47 • 前端开发 • 阅读 166

 // canvas的学习
    function draw(){
        var canvas = document.getElementById("canvas")//获取canvas对象（画布）
        var ctx = canvas.getContext("2d")//获取对应的画笔对象，获得 2d 上下文对象
        canvas.width = 800
        canvas.height = 600
        // 画笔绘制图像的两种方法;
        // ctx.fill填充fillStyle填充样式 ctx.stroke绘制边框strokeStyle边框样式
        // lineWidth边框宽度

        // 绘制两个矩形 图1
        ctx.fillStyle = "rgba(200,0,0)" //填充样式
        ctx.fillRect(10,10,55,50) //绘制一个填充的矩形fillRect(x,y,width,height)
        ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
        ctx.strokeRect(30, 30, 55, 50); //绘制一个矩形边框strokeRect(x,y,width,height)
        ctx.clearRect(20,20,10,10) //清除指定矩形区域，让清除部分完全透明clearRect(x,y,width,height)
        // 图2
        ctx.fillStyle = "#000"
        ctx.fillRect(120,10,60,60)
        ctx.clearRect(135,20,30,40)
        ctx.strokeStyle = 'blue'
        ctx.strokeRect(140,25,20,30)
        // 绘制路径 图3
        ctx.beginPath(); //)通过beginPath方法开启一个Path，closePath方法来结束一个Path
        ctx.moveTo(200, 25); //起点，path的两个基本方法之一
        ctx.lineTo(300, 75); //绘制一条线，从起点到该点的线，path的两个基本方法之一
        ctx.lineTo(300, 25);
        ctx.fillStyle = '#FE5F00'
        ctx.fill();
        ctx.closePath();
        // 绘制圆弧
        // arc(x,y,radius,startAngle,endAngle,anticlockwise)
        // 画一个以（x,y）为圆心的以radius为半径的圆弧（圆），从startAngle开始到endAngle结束，
        // 参数anticlockwise为一个布尔值。为true时，是逆时针方向，否则顺时针方向

        // 注意：arc()函数中表示角的单位是弧度，不是角度。角度与弧度的js表达式:
        // 弧度=(Math.PI/180)*角度。
        // 图4
        ctx.beginPath()
        ctx.arc(400,50,40,(Math.PI/180)*270,(Math.PI/180)*0,true)
        ctx.fillStyle = "#ACCDF4"
        ctx.fill();
        ctx.closePath();
        ctx.beginPath()
        ctx.arc(400,50,20,(Math.PI/180)*270,(Math.PI/180)*0,true)
        ctx.strokeStyle = "#fff"
        ctx.stroke()
    }
    draw()