html5学习(canvas)

我不是女神ヾ 2023-01-01 14:57 191阅读 0赞

> **以下是canvas的几个简单案例**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 1][]

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>html5学习(canvas)</title>
    <link rel="stylesheet" type="text/css" href="../css/inputAndDiv.css">
    </head>
    <body style="background-color: #CCE8CF;">
    <h3>html5学习(canvas)</h3>
    <canvas id="cv" width="500" height="500"></canvas>
    <canvas id="cv2" width="500" height="500"></canvas>
    <div id="show" style="height: 100px;">
    </div>
    </body>
    <script type="text/javascript">
    
    var canvasNode = $("cv");
    var myCanvas = canvasNode.getContext("2d");
    
    // myCanvas.fillStyle = "blue";
    //画线
    //起始位置的坐标
    // myCanvas.moveTo(10, 10);
    // myCanvas.lineTo(150, 50);
    // myCanvas.lineTo(10, 50);
    // myCanvas.lineTo(10, 200);
    // myCanvas.lineTo(300, 200);
    // //结束图形
    // myCanvas.stroke();
    
    //画圆
    /*
    参考https://www.runoob.com/jsref/met-canvas-arc.html
    	https://www.w3school.com.cn/tags/canvas_arc.asp
    */
    myCanvas.fillStyle = "Crimson";
    //False = 顺时针，true = 逆时针
    // myCanvas.arc(250, 150, 50, 0, Math.PI * 2, true);
    myCanvas.arc(250, 150, 125, 0, Math.PI * 1.5);
    // myCanvas.arc(250, 150, 125, 0, Math.PI * 1.5, true);
    // myCanvas.arc(250, 150, 125, 0, Math.PI * 1, false);
    // myCanvas.arc(250, 150, 125, 0, Math.PI * 0.5, true);
    // myCanvas.arc(250, 150, 125, 0, Math.PI * 0.5, false);
    myCanvas.fill();
    
    //色块叠加
    var canvas2Node = $("cv2");
    var myCanvas2 = canvas2Node.getContext("2d");
    //定义颜色
    myCanvas2.fillStyle = "Tomato";
    //定义矩形大小
    myCanvas2.fillRect(0, 0, 200, 200);
    
    myCanvas2.fillStyle = "rgba(0, 0, 255, 0.5)";
    // myCanvas2.fillStyle = "Purple";
    myCanvas2.fillRect(100, 100, 500, 500);
    
    
    function $(elementId) {
    	return document.getElementById(elementId);
    }
    
    var divNode = $("show");
    
    //监视鼠标移动，实时获取鼠标的坐标
    document.onmousemove = function(ev){
    	var x = ev.clientX;
    	var y = ev.clientY;
    	var fontStartNode = '<font style="font-size: 30px; color: blue;">';
    	var fontEndNode = '</font>';
    	divNode.innerHTML = fontStartNode + "X轴:" + x + "<br />" + "Y轴:" + y + fontEndNode;
    }
    </script>
    </html>

**canvas的其他功能我就不一一举例了，大家可以去查询相关的文档！**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70]: /images/20221120/433fbf7cdf82470e99d3f3254bd34fd4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 1]: /images/20221120/b890e55738e94db3929f60cd058fdde2.png