js+html5實(shí)現(xiàn)canvas繪制簡(jiǎn)單矩形的方法

更新時(shí)間：2015年06月05日 12:29:01 作者：不吃皮蛋

這篇文章主要介紹了js+html5實(shí)現(xiàn)canvas繪制簡(jiǎn)單矩形的方法,涉及html5圖形繪制的基本技巧,需要的朋友可以參考下

本文實(shí)例講述了js+html5實(shí)現(xiàn)canvas繪制簡(jiǎn)單矩形的方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下：

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #c3c3c3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>
</body>
</html>

希望本文所述對(duì)大家的web程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

js 計(jì)算月/周的第一天和最后一天代碼
這篇文章主要介紹了js 計(jì)算月/周的第一天和最后一天代碼,需要的朋友可以參考下
2020-02-02
ES6深入理解之“l(fā)et”能替代”var“嗎?
這篇文章主要介紹了關(guān)于ES6之"let"能替代"var"的相關(guān)資料，文中介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面跟著小編一起來學(xué)習(xí)學(xué)習(xí)吧。
2017-06-06
微信小程序集成前端日志庫(kù)的詳細(xì)記錄
這篇文章主要給大家介紹了關(guān)于微信小程序集成前端日志庫(kù)的詳細(xì)記錄,文中通過代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用微信小程序具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2024-07-07
js實(shí)現(xiàn)iframe動(dòng)態(tài)調(diào)整高度的代碼
iframe,尤其是不帶邊框的iframe因?yàn)槟芎途W(wǎng)頁無縫的結(jié)合從而不刷新頁面的情況下更新頁面的部分?jǐn)?shù)據(jù)成為可能，可是iframe的大小卻不像層那樣可以“伸縮自如”，所以帶來了使用上的麻煩，給iframe設(shè)置高度的時(shí)候多了也不好，少了更是不行，現(xiàn)在，讓我來告訴大家一種iframe動(dòng)態(tài)調(diào)整高度的方法，主要是以下JS函數(shù)：
2008-01-01
基于javascript實(shí)現(xiàn)九九乘法表
這篇文章主要為大家詳細(xì)介紹了基于javascript實(shí)現(xiàn)九九乘法表的相關(guān)資料，感興趣的小伙伴們可以參考一下
2016-03-03
TypeScript 運(yùn)行時(shí)類型檢查補(bǔ)充工具
這篇文章主要介紹了TypeScript 運(yùn)行時(shí)類型檢查補(bǔ)充工具，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-09-09
JavaScript實(shí)現(xiàn)的伸展收縮型菜單代碼
這篇文章主要介紹了JavaScript實(shí)現(xiàn)的伸展收縮型菜單代碼,可實(shí)現(xiàn)JavaScript響應(yīng)鼠標(biāo)事件動(dòng)態(tài)遍歷及修改頁面元素屬性的功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-10-10
6個(gè)DIV 135或246間隔一秒輪番顯示效果
6個(gè)DIV 間隔一秒輪番進(jìn)行奇偶顯示. 比如先135 一秒后 246 然后再135 循環(huán)
2010-07-07
實(shí)現(xiàn)隔行換色效果的兩種方式【實(shí)用】
本文主要介紹了實(shí)現(xiàn)隔行顏色交替鼠標(biāo)經(jīng)過高亮顏色的兩種方式的具體實(shí)例，有助于理解和使用。方案一：純CSS編寫；方案二：js代碼編寫。需要的朋友可以參考下
2016-11-11
Javascript動(dòng)畫效果（1）
這篇文章主要為大家詳細(xì)介紹了第一篇Javascript動(dòng)畫效果,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-10-10