2.11-HTML Canvas HTML5绘图-优快云博客

本文链接：https://blog.youkuaiyun.com/2301_79752960/article/details/145578425

标签<canvas></canvas>

<canvas id = "cav1" width= "600" height = "400" style= "border:1px solid #000">
        您的浏览器版本过低,不支持Canvas绘图功能，请升级浏览器!
    </canvas>
    <input type = "button" value = "绘图" onclick="drawCav1()">
    <script text="text/javascript">
        function drawCav1() {
            // 获得画板
            var cav = document.getElementById("cav1");
            // 获得画笔
            var ctx = cav.getContext("2d");
            // 设置颜色
            ctx.fillStyle = "#66cccc"
            // 绘制矩形
            ctx.fillRect(0,0,600,400);
            // 绘制边框矩形
            ctx.strokeStyle = "#01ED1C"
            ctx.lineWidth = 10;
            ctx.strokeRect(0,0,580,380);

            // 绘制直线
            ctx.beginPath();
            ctx.moveTo(80,20);
            ctx.lineTo(120,30);     
            ctx.strokeStyle = "red";
            ctx.stroke();
            ctx.closePath();

            // 绘制连续直线
            ctx.beginPath();
            ctx.strokeStyle = "#DB016E"
            ctx.moveTo(200,20);
            ctx.lineTo(250,30);
            ctx.lineTo(300,20);
            ctx.lineTo(350,30);
            ctx.lineTo(400,20);
            ctx.lineTo(450,30);
            ctx.stroke();
            ctx.closePath();

            // // 绘制圆形
            // ctx.beginPath();
            // ctx.fillStyle = "#98E301"
            // ctx.arc(450,280,100,0,Math.PI*2,true);
            // ctx.fill();
            // ctx.closePath();

            // // 绘制半圆
            // ctx.beginPath();
            // ctx.fillStyle = "#98E301"
            // ctx.arc(200,180,100,0,Math.PI,true);
            // ctx.fill();
            // ctx.closePath();

            // 绘制扇形
            ctx.beginPath();
            ctx.fillStyle = "#98E301"
            ctx.moveTo(450,280);
            ctx.arc(450,280,100,0,Math.PI*2*0.45,false);
            ctx.fill();
            ctx.closePath();
        
        }
    </script>

1. 画布标记: <canvas></canvas>

2. 获取Canvas元素: document.getElementById("cav1")

3. 获取Canvas画笔: document.getElementById("cav1").getContext("2d")

4. 设置颜色: ctx.fillStyle = "#6cc"

5. 绘制矩形: ctx.fillRect(100,100,200,200) // 参数: x,y,width,height

6. 绘制边框矩形: ctx.strokeStyle = "#01edic" // 设置边框颜色

ctx.lineWidth = 10; // 设置边框宽度

ctx.strokeRect(100,100,200,200) // 参数: x,y,width,height

7.重置画笔: ctx.beginPath()

8. 绘制直线: ctx.moveTo(100,100) // 设置起点坐标

ctx.lineTo(200,200) // 设置终点坐标

ctx.strokeStyle = "red" // 设置线条颜色

ctx.stroke() // 绘制线条

ctx.closePath() // 关闭路径

9. 绘制连续直线: ctx.beginPath()

ctx.moveTo(100,100) // 设置起点坐标

ctx.lineTo(200,200) // 设置终点坐标

ctx.lineTo(300,100) // 设置终点坐标

ctx.lineTo(400,200)

ctx.lineTo(500,100)

ctx.strokeStyle = "#DB016E" // 设置线条颜色

ctx.stroke() // 绘制线条

ctx.closePath() // 关闭路径

10. 绘制圆形: ctx.beginPath()

ctx.fillStyle = "#98E301" // 设置填充颜色

ctx.arc(300,200,50,0,2*Math.PI,true) // 参数: x,y,半径,起始角度,终止角度 (true: 顺时针画圆)

ctx.fill() // 填充圆形

ctx.closePath() // 关闭路径

注意 ctx.fillStyle 是填充颜色 ctx.strokeStyle 是边框颜色

综合练习:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>综合练习</title>
    <script text = "text/javascript">
        function drawCanvas(){
            // 获得三个滑块中的数据
            var r1 = document.getElementById("range1").value;
            var r2 = document.getElementById("range2").value;
            var r3 = document.getElementById("range3").value;
            // 将获得的值赋值给三个滑块显示的值
            document.getElementById("op1").value = r1;
            document.getElementById("op2").value = r2;
            document.getElementById("op3").value = r3;
            // 获得画板&画笔
            var canvas = document.getElementById("cav1");
            var ctx = canvas.getContext("2d");
            //设置颜色
            var cs = new Array("red","green","blue");
            // 计算三个滑块的总和
            var sum = Number(r1) + Number(r2) + Number(r3);



            // 计算每个滑块所占百分比
            if(sum > 0){
                var pr1 = r1/sum;
                var pr2 = r2/sum;
                var pr3 = r3/sum;
                // 将百分比显示
                document.getElementById("op11").value = Math.floor(pr1*100) + "%";
                document.getElementById("op12").value = Math.floor(pr2*100) + "%";
                document.getElementById("op13").value = Math.floor(pr3*100) + "%";
                var cn = new Array(pr1,pr2,pr3);
                var startAngle = 0;
                var endAngle = 0;
                for(var i = 0;i<3;i++){
                    ctx.beginPath();
                    endAngle = endAngle + Math.PI*2*cn[i];  // 计算在整个圆中的占比
                    ctx.fillStyle = cs[i];
                    ctx.moveTo(200,200);
                    ctx.arc(200,200,150,startAngle,endAngle,false);
                    startAngle = endAngle;  // 计算下一个扇形的起始角度
                    ctx.fill();
                    ctx.closePath();
                }
            }
            // 画一个黑色的眼睛
            ctx.beginPath();
            ctx.fillStyle = "black";
            ctx.arc(200,150,20,0,Math.PI*2,false);
            ctx.fill();
            ctx.closePath();

        }
    </script>
</head>
<body onnload="drawCanvas()">
    <canvas id = "cav1" width = "400" height = "400"></canvas>
    <br>
    第一个值:
    <input type = "range" id = "range1" min = "0",max="100",value="50" oninput="drawCanvas()">
    <output id = "op1">50</output>
    <output id = "op11">0%</output><br>
    第二个值:
    <input type = "range" id = "range2" min = "0",max="100",value="50" oninput="drawCanvas()">
    <output id = "op2">50</output>
    <output id = "op12">0%</output><br>
    第三个值:
    <input type = "range" id = "range3" min = "0",max="100",value="50" oninput="drawCanvas()">
    <output id = "op3">50</output>
    <output id = "op13">0%</output><br>
    
</body>
</html>