當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

canvas绘制正文形并填充-2

發(fā)布時(shí)間：2025/4/16 编程问答 25 豆豆

生活随笔收集整理的這篇文章主要介紹了 canvas绘制正文形并填充-2 小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

效果圖

html結(jié)構(gòu)

<!DOCTYPE html>

<html>

<head>

<title>canvas10</title>

</head>

<body>

當(dāng)前瀏覽器不支持canvas,請(qǐng)更換瀏覽器后再試

</canvas>

</body>

</html>

js腳本

window.onload = function(){

var canvas = document.getElementById('canvas');

canvas.width = 800;

canvas.height = 800;

var context = canvas.getContext('2d');

drawRect(context,100,100,400,400,10,"#058","red");

}

function drawRect(context,x,y,width,height,borderWidth,borderColor,fillColor){

context.beginPath();

context.rect(x,y,width,height);

context.closePath();

context.lineWidth = borderWidth;

context.fillStyle = fillColor;

context.strokeStyle = borderColor;

context.fill();

context.stroke();

}

</script>

本文轉(zhuǎn)自 ?素顏豬 ?51CTO博客，原文鏈接:
http://blog.51cto.com/suyanzhu/1892696

以上是生活随笔為你收集整理的canvas绘制正文形并填充-2的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。