$(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使用canvas画空心圆与实心圆

用html5绘制折线图的实例代码

使用纯HTML5编写一款网页上的时钟的代码分享

html5 标签

html5 自定义播放器核心代码

html5绘制时钟动画

简单html5代码获取地理位置

html5 css3实例教程

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

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

精品推荐
分类导航