$(document).ready(function(..." />
 手机
当前位置:查字典教程网 >网页设计 >HTML5教程 >html5教程画矩形代码分享
html5教程画矩形代码分享
摘要:HTML5画矩形http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.j...

<!DOCTYPE html><head>

<meta charset=utf-8>

<title>HTML5画矩形</title>

<script src="<a href="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script">http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script</a>>

</head>

<script>

$(document).ready(function(){

var c=document.getElementById("drawbox");

var draw=c.getContext("2d"); //获取2d内容的引用,调用绘图API

draw.fillStyle="#ff0000"; //方式一指定填充颜色

draw.fillRect(0,0,300,100); //坐标和长宽

draw.fillStyle="rgba(0,0,255,0.5)"; //方式二rgb+透明度

draw.fillRect(400,0,100,100); //坐标和长宽

})

</script>

</body>

<canvas id="drawbox" width="500" height="500"></canvas>

</body>

</html>

效果图

html5教程画矩形代码分享1

【html5教程画矩形代码分享】相关文章:

html5 更新图片颜色示例代码

html5弹跳球示例代码

利用HTML5画出一个坦克的形状具体实现代码

html5 canvas 简单画板实现代码

html5使用canvas画三角形

html5弹跳球示例代码

html5使用canvas画三角形

html5使用canvas画空心圆与实心圆

html5 canvas绘制矩形和圆形的实例代码

html5 自定义播放器核心代码

精品推荐
分类导航