[英]How to draw border around canvas
我正在畫布上用白色背景顏色繪制圖像。 我想在畫布周圍畫一個邊框,我無法這樣做。 這是我的代碼:
canvas.width = image.width;
canvas.height = image.height;
var context = canvas.getContext('2d');
context.fillStyle = "black";
context.font = "50px Arial";
context.fillText(chartId, 0, 50);
context.drawImage(image, 0, 0);
context.globalCompositeOperation = "destination-over";
context.fillStyle = "#FFFFFF";
context.fillRect(0,0,canvas.width,canvas.height);//for white background
在此之后我想在整個畫布周圍出現一個紅色邊框。
設置context.lineWidth
至2
,設置context.strokeStyle
到#FF0000"
,並使用context.strokeRect
,不fillRect
。 globalCompositeOperation
如果設置為destination-over
,那么新申請的事情將使用畫布的價值,所以更改為source-over
。使用lightblue
偽造代碼中的drawImage
var canvas = document.getElementById('cv'); canvas.width = 400; canvas.height = 300; var context = canvas.getContext('2d'); context.fillStyle = "black"; context.font = "50px Arial"; context.fillText('ASD', 0, 50); context.globalCompositeOperation = "destination-over"; context.fillStyle = "#00FFFF"; context.fillRect(0,0,canvas.width,canvas.height);//for white background context.globalCompositeOperation = "source-over"; context.lineWidth = 2; context.strokeStyle="#FF0000"; context.strokeRect(0, 0, canvas.width, canvas.height);//for white background
<canvas id="cv"></canvas>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.