简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首頁 > web前端 > H5教程 > 主體

html5教學畫矩形程式碼分享

高洛峰
發布： 2017-03-12 16:50:07
原創
2126 人瀏覽過

html5可以畫很多種形狀，以下是畫矩形程式碼分享，大家參考使用吧

程式碼如下:

<!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://www.php.cn/"></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教學畫矩形程式碼分享

以上是html5教學畫矩形程式碼分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！

相關標籤：
html5教程 画矩形
來源：php.cn
上一篇：Html5web本機儲存實例詳細說明 下一篇：如何使用html5時鐘實作（附程式碼）
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
swift - iOS绘制界面都是图形操作的界面？ 我原来是做web前端的，最近公司有需求，在学iOS开发，看了些教程，都是用storyboard来画的，请问有用代码画的吗？ 用图形画比用代码画要好吗？主要考虑到屏幕适配问题，用代码...
來自於 2017-04-17 17:39:13
0
3
326
python - 如何画好一个框架设计图. 做开发有1年多了，一直没画过框架图，今天第一次画，百度上面照猫画虎搞了一套。发出来给大家看看。那里画的不对给指导下。或者推荐点这方面的教程资料。 结构图形地址https://www...
來自於 2017-04-17 17:24:14
0
2
244
baidu-地图 - 请教一个问题， 百度地图的javascript api 能否用触摸方式动态画一个圆或者矩形？ 如题，请教下解决思路。
來自於 2017-04-10 15:33:56
0
3
394
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！