您現在的位置是:電腦技術吧?>? 基礎知識 ??>??canvas繪制矩形,canvas繪制空心矩形??>??正文詳情

canvas繪制矩形,canvas繪制空心矩形

第五思琪2019-11-13 16:21:14 人圍觀
簡介canvas繪制實心矩形的方法在過去的兩天里,我需要用我同事的HTML5來畫圖。我發現矩形函數所畫的邊界存在風格不一致的問題。最后,我通過一些消除方法找到了問題的癥結所在,現在我

這兩天需要用到同事HTML5畫圖的東東,發現里面畫矩形的函數畫出來的邊框出現了樣式不一致的問題,最后我通過一些排除法找到了問題的癥結,現分享給大家。

先附上HTML5畫矩形的的代碼:復制代碼代碼如下:canvas id=myCanvas width=578 height=200/canvas script var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); context.beginPath(); context.rect(188.0, 50, 200, 100.375); context.fillStyle = 'white'; context.fill(); context.lineWidth = 1; context.strokeStyle = 'red'; context.stroke(); /script你會發現執行后邊框樣式不一樣,明顯底部很細。

顏色也略有不同

把context.rect(188.0, 50, 200, 100.375)修改為context.rect(188.0, 50, 200, 100)后,發現樣式就完全一致了。

由此說明:畫矩形的時候,如果里面的參數有不是整數的話,容易導致邊框問題,所以建議大家取整后再用。

版權聲明:本文由 第五思琪 整理編輯。

原標題:html5canvas畫矩形,canvas繪制圓角矩形

轉載注明出處:http://www.dn9ww09s.icu/basics/11878.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 本地連接不見了,本地連接

    本地連接不見了,本地連接 相關圖片電腦的本地連接不見了怎么辦如今,我們越來越多地使用計算機工作,而網絡是計算機的命脈。如果在使用計算機時遇到沒有本地連接的問題,我們應該怎么做?有些用戶不知道怎么做...

  • 什么哪些什么填空,什么啊什么填空

    什么哪些什么填空,什么啊什么填空 相關圖片什么地找填空當你在網上制作獎勵信息時,你經常會看到一些標題標題填寫在空白的在線/標題樣式類型=文本/CSS!--. 仙{左邊框樣式:無;右邊框樣式:無什么地想填空...

  • 筆記本的虛擬內存,筆記本虛擬內存有用嗎

    筆記本的虛擬內存,筆記本虛擬內存有用嗎 相關圖片電腦虛擬內存設置多少戴爾品牌是全球知名的IT品牌,主要集中在IT產品上,更注重整體,所以自然會有很多用戶使用戴爾筆記本,當然也有一些用戶覺得電腦內存不足,因為有很多軟件...

  • 元素隱藏,js判斷元素顯示隱藏

    元素隱藏,js判斷元素顯示隱藏 相關圖片html元素隱藏一。Dreamweaver顯示隱藏元素行為1。將AP div(通常稱為layer)插入到web頁面2中。選擇body標記、link(a)標記或AP元素3。打開行jquery元素顯示和隱藏...

  • 電腦鍵盤圖,電腦鍵盤示意圖高清

    電腦鍵盤圖,電腦鍵盤示意圖高清 相關圖片電腦鍵盤指法示意圖很多朋友都想知道電腦鍵盤圖的制作方法。其實,電腦鍵盤圖的制作方法很簡單。如果你想學習,編輯一定會教你電腦鍵盤圖的方法!接下來,我將為您帶來電腦鍵...

  • wifi密碼查看,如何查看wifi密碼

    wifi密碼查看,如何查看wifi密碼 相關圖片wifi密碼忘了怎么辦WiFi無線連接被越來越多的人廣泛使用。人多了,自然會有一些安全隱患,比如被擦網。我們有時會抱怨網絡速度太差,其實很大一部分是有人搓網造成的,所以我們就...

  • 表單和表格,excel 表單

    表單和表格,excel 表單 相關圖片html表格一。在Dreamweaver的表單1中插入表。單擊鼠標,將光標放在窗體的框架線內,然后插入表,就像在普通文檔中一樣。如下圖所示:您可以在代碼視圖中查看源代碼:2怎樣編輯表格...

  • wifi密碼查看,如何查看wifi密碼

    wifi密碼查看,如何查看wifi密碼 相關圖片wifi密碼忘了怎么辦WiFi無線連接被越來越多的人廣泛使用。人多了,自然會有一些安全隱患,比如被擦網。我們有時會抱怨網絡速度太差,其實很大一部分是有人搓網造成的,所以我們就...

  • 靜態網站html,靜態html網頁源碼

    靜態網站html,靜態html網頁源碼 相關圖片html5一。它可以通過下載行為下載并通過innerHTML功能顯示。具體步驟:span id=demo SRC=demo。Htmstyle=behavior:URL(?html...

  • 一鍵解除root工具,輕松一鍵root

    一鍵解除root工具,輕松一鍵root 相關圖片360 一鍵 root如果我們想刪除手機上的一些軟件,卻發現我們沒有權限,該怎么辦?我們可以使用360一鍵根工具,它為我們提供權限,并幫助我們獲得刪除系統中不必要的應用程序的權限...

熱評文章

  • 電腦連打印機脫機,電腦與打印機脫機了怎么辦

    電腦連打印機脫機,電腦與打印機脫機了怎么辦 相關圖片打印機脫機了怎么解決平時我們會用打印機打印文件和資料,方便在班上工作或學習。但是,在使用打印機的過程中,我們可能會遇到打印機離線無法打印的情況。要解決這個問題,我...

  • 切圖,.9切圖

    切圖,.9切圖 相關圖片切圖什么意思享受生活,熱愛重建,大家好,我是這個充斥著HTML5話題的時代的賈森,似乎不懂HTML5的人有點落伍了。讓我也跟上潮流。我今天分享的是一個基于HTML5的自助截三格切圖...

  • 手把手教你如何組裝一臺電腦,組裝筆記本電腦教程

    手把手教你如何組裝一臺電腦,組裝筆記本電腦教程 相關圖片臺式電腦裝機教程大量用戶認為,他們自己動手組裝的電腦肯定比他們購買的整臺機器更劃算。事實上,各種配件都會在到貨后進行組裝。小編會給你介紹電腦安裝的步驟。如果你感興...

  • 雷神筆記本黑屏怎么辦,雷神筆記本不能開機

    雷神筆記本黑屏怎么辦,雷神筆記本不能開機 相關圖片雷神筆記本怎么強制關機雷神筆記本的用戶告訴小編,當他打開電腦時,發現筆記本里有一個黑屏,他不知道怎么解決。我們知道筆記本電腦是由顯示器、鍵盤、鼠標、CPU、內存和硬盤...

  • 面包屑怎么做,面包屑可以做啥

    面包屑怎么做,面包屑可以做啥 相關圖片面包屑炸蝦的做法方法1,說明:該方法使用CSS3,無圖片,兼容各種WebKit瀏覽器,兼容IE8 。首先,上圖:1。HTML代碼相對簡單。您只需要一個簡單的UL和Li代碼,如下面包屑炸蝦...

  • 惠普筆記本進入bios,惠普筆記本bios

    惠普筆記本進入bios,惠普筆記本bios 相關圖片惠普臺式電腦怎么進入biosBIOS是整個計算機最基本的設置。啟動計算機的第一步是先加載BIOS,然后通過BIOS加載系統將其引導到系統中。BIOS中有許多實用的設置。以下是HP電腦如何進惠普...

  • 網頁抖動怎么調整,抖動

    網頁抖動怎么調整,抖動 相關圖片系統抖動向CSS添加以下代碼:HTML,body{overflow-y:scroll;}HTML,body{overflow:scroll;min height:101手機畫面抖動怎么回事...

  • 一鍵清除bat,一鍵垃圾

    一鍵清除bat,一鍵垃圾 相關圖片下載垃圾一鍵清除重新安裝系統時,將覆蓋以前系統的文件。我們使用它可能不重要,但當我們使用它時,我們會感到計算機越來越擁擠。因此,我們需要學習如何通過單擊清除系統垃...

  • 段落縮進,段落首行縮進

    段落縮進,段落首行縮進 相關圖片各段落首行縮進2字符CSS段落縮進的語法如下:語法:文本縮進:允許值:初始值:0文本縮進屬性可以應用于塊級元素(P、H1等),以定義元素第一行可以接受各段落懸掛縮進...

  • 電腦顯示器老是黑屏,電腦為什么顯示器黑屏

    電腦顯示器老是黑屏,電腦為什么顯示器黑屏 相關圖片電腦顯示器黑屏閃爍我經常在網上看到一些網友說電腦顯示器上有一個黑屏。我不知道該怎么辦。嘗試后無法重新啟動計算機監視器。事實上,電腦顯示器上出現黑屏有很多原因。由于...

關注微信

变脸官网查询