canvas笔记-使用canvas画矩形及各样式（透明）
生活随笔
收集整理的這篇文章主要介紹了
canvas笔记-使用canvas画矩形及各样式（透明）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
程序運行截圖如下：
源碼如下：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><canvas id="canvas" style="border:1px solid #aaa;display:block;margin:50px auto;">當前瀏覽器不支持Canvas，請更換瀏覽器后再試 </canvas><script>window.onload = function() {let canvas = document.getElementById("canvas");canvas.width = 800;canvas.height = 800;let context = canvas.getContext("2d");drawRect(context, 100, 100, 400, 400, 10, "#508", "red");drawFillRect(context, 200, 200, 400, 400, 10, "#508", "blue");drawFillRect(context, 300, 300, 400, 400, 10, "#508", "rgba(255, 255, 0, 0.5)")}function drawRect(cxt, x, y, width, height, borderWidth, borderColor, fillColor){cxt.beginPath();cxt.rect(x, y, width, height);cxt.closePath();cxt.lineWidth = borderWidth;cxt.fillStyle = fillColor;cxt.strokeStyle = borderColor;cxt.fill();cxt.stroke();}function drawFillRect(cxt, x, y, width, height, borderWidth, borderColor, fillColor){cxt.lineWidth = borderWidth;cxt.fillStyle = fillColor;cxt.strokeStyle = borderColor;cxt.fillRect(x, y, width, height);cxt.strokeRect(x, y, width, height);}</script> </body> </html>畫矩形有兩種：
一種是：使用
rect()函數畫出框，然后使用：
cxt.lineWidth = borderWidth;cxt.fillStyle = fillColor;cxt.strokeStyle = borderColor;cxt.fill();這些進行填充。
第二種是使用：
function drawFillRect(cxt, x, y, width, height, borderWidth, borderColor, fillColor){cxt.lineWidth = borderWidth;cxt.fillStyle = fillColor;cxt.strokeStyle = borderColor;cxt.fillRect(x, y, width, height);cxt.strokeRect(x, y, width, height);}這種方式進行繪制。
關于透明相關的：
cxt.fillStyle = fillColor;可以通過傳入rgba(255, 255, 0, 0.5)這種方式設置透明度。
?
總結
以上是生活随笔為你收集整理的canvas笔记-使用canvas画矩形及各样式（透明）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Qt笔记-QSslSocket双向认证
- 下一篇： canvas笔记-使用arc与lineT