搜尋
首頁web前端H5教程html5 Canvas畫圖教學(9)—canvas中畫出長方形和圓形_html5教學技巧

本文講在canvas中畫出長方形和圓形的辦法,他們屬於基礎圖形。當然,基礎圖形本來不只他們,但在canvas中,只有畫矩形與圓形不需要用其他方法模擬。

canvas畫矩形
1,fillRect與strokeRect
fillRect可以直接填入一個矩形,填充樣式是你目前設定的樣式;理strokeRect就是直接描邊一個矩形
他們的參數是一致的,依序是(起點x座標,起點y,矩形的寬,矩形的高)。這裡的起點,注意,是指矩形的左上角那個點。
我們通常用他們來做簡單的事,他們也只能做簡單的事。為什麼?因為他們畫的圖形沒有「路徑」的說法,直接就出來了。
例如你先用fillRect填滿了一個矩形,然後你想把這個矩形描邊,如果你使用stroke(),則不會有效果,因為此時雖然有個矩形,但並不存在路徑。
如果你迫切的想把這個矩形描邊,你可以在同樣的位置使用strokeRect()來描邊一個矩形——但他們其實是獨立的,只是位置重疊罷了。

複製程式碼
程式碼如下:

ctx.fillRect(250,100, );
ctx.strokeRect(200,100,50,40);

如果我們想要一個又有填充又有描邊的矩形,那同時使用fillRect和strokeRect無疑顯得很累贅。所以這種情況我們通常會使用以下方法。

2,rect
rect的參數與fillRect和strokeRect毫無差別,不同的是他畫出的只是路徑,至於描邊或是填充要你後續自己完成。

複製程式碼
程式碼如下:

ctx.rect(300,10,550,500 );
ctx.stroke()
ctx.fill();

這樣做有什麼好處呢?前面的文章我提到過,填充或描邊會消耗大量資源,所以我們經常(例如循環)需要一次性繪製幾百條路徑,再來描邊或填充。此時使用rect畫路徑,最後再填充,就避免了fillRect和strokeRec每次都要填滿或描邊的問題。

3,lineTo
當然你也可以像我的畫線條的教程那樣,用4個lineTo來畫出一個矩形。但這毫無必要,具體可看那篇文章。

Canvas畫圓形
蒼天無眼,其實canvas並沒有一個真正的可以直接畫出圓形的函數,他畫的其實是一個360度的圓弧,看起來就是個圓形了。
canvas畫圓弧的函數我們前面講過了,即arc.我們用他來畫一個圓形:

複製程式碼
程式碼如下:

ctx.arc(300 25,100 20,20,0,Math.PI*2);
ctx.stroke()
ctx. fill();

這個arc和rect一樣,畫出的也是路徑,填充或描邊需要後續完成。
但要注意的是,圓形的位置判斷和長方形是不一樣的。我們以長方形的左上角為起點來決定他的位置,但圓形的位置我們通常用圓心來決定。
如果你想畫一組水平和垂直都居中的長方形與圓形,那你可要記得不要把長方形的起點當成了畫圓形的起點-圓形的起點可是圓心哈!
 
算了,我還是給你一個現在的公式吧,對齊的圓與矩形,圓心的坐標=矩形的坐標 矩形的一半寬高。
也就是圓心x=矩形x 矩形寬/2,圓形y=矩形y 矩形高/2。這樣他們就是絕對對齊了的。
雖然arc沒有直接畫圓的方法那麼好用——我設想的直接畫圓的方法只需要3個參數,即圓心坐標即半徑——但arc不止可以畫圓,還可以畫半圓什麼的,所以功能更強大,用著也將就了。
既然有圓,那麼就應該有橢圓,但canvas中連一個正規的畫圓的函數都沒有,更別提橢圓了。所以畫橢圓必須用其他方法模擬,這個比較複雜,我留到後面講吧。
陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
Vue和Canvas:如何实现手写签名和手势识别功能Vue和Canvas:如何实现手写签名和手势识别功能Jul 18, 2023 am 08:49 AM

Vue和Canvas:如何实现手写签名和手势识别功能引言:手写签名和手势识别功能在现代应用程序中越来越常见,它们可以为用户提供更加直观和自然的交互方式。Vue.js作为一款流行的前端框架,搭配Canvas元素可以实现这两个功能。本文将介绍如何使用Vue.js和Canvas元素来实现手写签名和手势识别功能,并给出相应的代码示例。一、手写签名功能实现要实现手写签

Canvas的优势有哪些Canvas的优势有哪些Aug 17, 2023 pm 04:52 PM

canvas的优势有强大的绘图功能、高性能、跨平台兼容性、支持多种图形格式、可以与其他Web技术集成、可以实现动态效果和可以实现复杂的图像处理。详细介绍:1、Canvas提供了丰富的绘图功能,可以绘制各种形状、线条、文本、图像等;2、Canvas在浏览器中直接操作像素,因此具有很高的性能;3、Canvas是基于HTML5标准的一部分,可以在各种现代浏览器上运行等等。

如何利用Vue和Canvas创建逼真的天气动态背景如何利用Vue和Canvas创建逼真的天气动态背景Jul 17, 2023 am 08:33 AM

如何利用Vue和Canvas创建逼真的天气动态背景引言:在现代网页设计中,动态背景效果是吸引用户眼球的重要元素之一。本文将介绍如何利用Vue和Canvas技术来创建一个逼真的天气动态背景效果。通过代码示例,你将学习如何编写Vue组件和利用Canvas绘制不同天气场景,从而实现一个独特而吸引人的背景效果。步骤一:创建Vue项目首先,我们需要创建一个Vue项目。

canvas特效有哪些canvas特效有哪些Aug 18, 2023 pm 04:12 PM

canvas特效有粒子效果、线条动画、图片处理、文字动画、音频可视化、3D效果、游戏开发等。详细介绍:1、粒子效果,通过控制粒子的位置、速度和颜色等属性来实现各种效果,如烟花、雨滴、星空等;2、线条动画,通过在画布上绘制连续的线条,创建出各种动态的线条效果;3、图片处理,通过对图片进行处理,可以实现各种炫酷的效果,如图片切换、图片特效等;4、文字动画等等特性。

canvas引擎有哪些canvas引擎有哪些Aug 17, 2023 pm 05:29 PM

canvas引擎有Three.js、Pixi.js、EaselJS、Konva.js、Paper.js等。详细介绍:1、Pixi.js,提供了简单易用的API,支持精灵、纹理、滤镜等功能,同时还提供了丰富的工具和插件,方便开发者进行交互、动画和优化等操作;2、Pixi.js,提供了简单易用的API,支持精灵、纹理、滤镜等功能,还提供了丰富的工具和插件;3、EaselJS等等。

canvas插件有哪些canvas插件有哪些Aug 17, 2023 pm 05:00 PM

canvas插件有Fabric.js、EaselJS、Konva.js、Three.js、Paper.js、Chart.js和Phaser。详细介绍:1、Fabric.js 是一个基于Canvas的开源 JavaScript 库,它提供了一些强大的功能;2、EaselJS是CreateJS库中的一个模块,它提供了一套简化了Canvas编程的API;3、Konva.js等等。

Vue和Canvas:如何实现图片的马赛克效果Vue和Canvas:如何实现图片的马赛克效果Jul 16, 2023 pm 10:17 PM

Vue和Canvas:如何实现图片的马赛克效果引言:随着Web技术的不断发展,越来越多的人开始使用Vue框架来构建交互式的前端应用。而在前端开发中,常常需要为用户提供图片处理的功能。本文将介绍如何利用Vue和Canvas实现图片的马赛克效果,为用户带来更好的视觉体验。一、马赛克效果概述马赛克效果是一种将图像的细节部分进行像素化处理,使得整个图像变得模糊和抽象

canvas框架有哪些canvas框架有哪些Aug 17, 2023 pm 04:42 PM

canvas框架有Fabric.js框架、Konva.js框架、EaselJS框架、Paper.js框架、Three.js框架等。详细介绍:1、Fabric.js框架,支持图形的选择、缩放、旋转、拖拽等操作,并且可以导出为图片或SVG格式;2、Konva.js框架,支持图形的层级管理、变换操作、事件监听等功能,适用于创建交互式的图形应用程序;3、EaselJS框架等等。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前By尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序,非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具,幫助Web開發人員更好地理解保護網路應用程式的過程,並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞,難度各不相同。請注意,該軟體中

Atom編輯器mac版下載

Atom編輯器mac版下載

最受歡迎的的開源編輯器

Dreamweaver Mac版

Dreamweaver Mac版

視覺化網頁開發工具

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )專業的PHP整合開發工具

SecLists

SecLists

SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合,這些清單在安全評估過程中經常使用,而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表,幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上,他就可以存取所需的每種類型的清單。