CSS3-Canvas畫布（圖形-矩形）

時間 2019-12-08

標籤 css3 css canvas 畫布圖形矩形欄目 CSS 简体版

原文原文鏈接

<!DOCTYPE html5><html lang="en"><head>    <meta charset="UTF-8">    <title>CSS3-Canvas畫布（圖形-矩形）</title>    <script>        window.onload=function () {            var canvas=document.getElementById("canvas");//獲取canvas對象            var ctx=canvas.getContext("2d"); //建立二維的繪圖上下文對象            ctx.rect(50,50,200,200);//定義矩形的邊框            ctx.strokeStyle="red"; //填充邊框（路徑）顏色            ctx.fillStyle="green";//填充邊框顏色            ctx.fill();            ctx.stroke();            ctx.clearRect(60,60,100,50);//擦除矩形區域內的圖形//            ctx.strokeRect(50,50,200,100);//定義無填充的矩形////            ctx.fillStyle="red"; //填充矩形顏色//            ctx.fliiRect(50,50,200,100);//定義有填充的矩形        }    </script></head><body><h2>Canvas畫布（圖形）</h2><canvas id="canvas" width="500" height="500" style="border:1px solid red ">    瀏覽器不支持canvas</canvas></body></html>

相關標籤/搜索