canvas笔记-使用canvas画矩形及各样式（透明）
生活随笔
收集整理的這篇文章主要介紹了
canvas笔记-使用canvas画矩形及各样式（透明）
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
程序運(yùn)行截圖如下：
源碼如下：
<!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;">當(dāng)前瀏覽器不支持Canvas，請(qǐng)更換瀏覽器后再試 </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>畫(huà)矩形有兩種：
一種是：使用
rect()函數(shù)畫(huà)出框，然后使用：
cxt.lineWidth = borderWidth;cxt.fillStyle = fillColor;cxt.strokeStyle = borderColor;cxt.fill();這些進(jìn)行填充。
第二種是使用：
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);}這種方式進(jìn)行繪制。
關(guān)于透明相關(guān)的：
cxt.fillStyle = fillColor;可以通過(guò)傳入rgba(255, 255, 0, 0.5)這種方式設(shè)置透明度。
?
總結(jié)
以上是生活随笔為你收集整理的canvas笔记-使用canvas画矩形及各样式（透明）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： Qt笔记-QSslSocket双向认证
- 下一篇： canvas笔记-使用arc与lineT