首页 > 编程 > HTML > 正文

HTML5实例教程:canvas标签绘制矩形实例代码

2024-08-26 00:16:47
字体:
来源:转载
供稿:网友

武林网(www.vevb.com)文章简介:html5-canvas标签--绘制矩形。

<!DOCTYPE html>

<html>

<head>

<meta charset='utf-8'>

<title>html5-canvas标签--绘制矩形</title>

</head>

<body>

<canvas id="1" width="200" height="200"></canvas>


<script type="text/javascript">

window.onload = function(){

var canva =document.getElementById('1')

var content =canva.getContext('2d')

content.fillStyle = "#ccc";//填充canvas的背景颜色

content.fillRect(0, 0, 200, 200);//参数分别表示 x轴,y轴,宽度,高度

content.lineWidth = 4;//边框宽度

content.strokeStyle = "#fff";//边框颜色

content.strokeRect(50,50,100,100);//边框坐标及大小

content.fillStyle = "#f00";//矩形填充颜色

content.fillRect(50,50,100,100);//矩形坐标及大小

}


</script>

</body>

</html>

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表