<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>canvas-矩形</title> <style> #canvas{ border: 1px solid palevioletred; } </style> <script> window.onload = function (){ //獲取到canvas元素 var canvas = document.getElementById('canvas'); //獲取canvas中的畫圖環境 var context = canvas.getContext('2d'); //開啟新的一條路徑 context.beginPath(); //第一種 ：繪制矩形路徑的方式 //繪制矩形 context.rect(100,100,200,100); //描邊 context.stroke(); //填充 context.fill(); //第二種 ：直接繪制矩形邊框 context.strokeRect(100,210,200,100); //第三種 ：直接繪制填充矩形 context.fillRect(100,320,200,100); //矩形擦除 context.clearRect(200,100,20,420); //擦除整個畫布 //context.clearRect(0,0,canvas.width,canvas.height); } </script></head><body> <canvas id="canvas" width="500px" height="500px"> </canvas></body></html>
新聞熱點
疑難解答
