$(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 css3实例教程

html5生成柱状图(条形图)效果的实例代码

html5 兼容IE6结构的实现代码

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

html5弹跳球示例代码

html5基础教程常用技巧整理

html5读取本地文件示例代码

html5时钟实现代码

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

html5 Canvas画图教程(1)—画图的基本常识

精品推荐
分类导航