這篇文章主要介紹了canvas與svg使用實(shí)例分析的相關(guān)知識，內(nèi)容詳細(xì)易懂，操作簡單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇canvas與svg使用實(shí)例分析文章都會有所收獲，下面我們一起來看看吧。

站在用戶的角度思考問題，與客戶深入溝通，找到鯉城網(wǎng)站設(shè)計(jì)與鯉城網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、域名申請、網(wǎng)頁空間、企業(yè)郵箱。業(yè)務(wù)覆蓋鯉城地區(qū)。

1.canvas畫布（位圖）

2.繪制矢量圖

不要在style中給canvas設(shè)置寬高 會有位移差

//獲取元素

var c=document.getElementById（"c"）

//獲取繪圖環(huán)境

var c=c.getContext（"2d"）

fillRect（） 繪制一個(gè)填充的方塊 默認(rèn)顏色是黑色

strokeRect（） 繪制帶邊框的方塊

繪制線條

moveTo（） 繪制線段起點(diǎn)

lineTo（） 繪制線段的領(lǐng)點(diǎn)

每個(gè)線條只能有一個(gè) moveTo可以有多個(gè) lineTo

stroke（） 繪制線段

beginPath（） closePath（） 二者同時(shí)出現(xiàn) 將繪制路徑閉合（起始點(diǎn) 結(jié)尾點(diǎn)首位相連）

Rect（） 繪制方塊

clearRect（0,0,width,height）清楚畫布

save（） restore（） 二者成對出現(xiàn) 中間屬性樣式只影響內(nèi)部，不影響外部

1.畫圓

c.closePath（）

c.fill（）

c.restore（）

c.moveTo（200,200）

c.arc（200,200,150,0,360*Math.PI/180,true）

c.stroke（）

200,200是圓形坐標(biāo) 50是半徑

0是起始弧度 Math.PI是結(jié)束弧度

true是逆時(shí)針 flase是順時(shí)針

注意：角度有正負(fù)之分 順時(shí)針角度是正的，逆時(shí)針角度是負(fù)的

2.畫布的平移和旋轉(zhuǎn)

平移translate 畫布大小位置不變 起始坐標(biāo)變了

相當(dāng)于坐標(biāo)平移

rotate（） 畫布的旋轉(zhuǎn)都是以00起始點(diǎn)為中心點(diǎn)旋轉(zhuǎn)

scale（0.5,0.5） 畫布的縮放 就是將畫布向后移動 跟人的視距就變遠(yuǎn)了 近大遠(yuǎn)小

c.fillStyle='lightpink'

c.scale（0.5,0.5）

c.fillRect（0,0,100,100）

畫布中插入圖片

//獲取元素

var c=document.getElementById（"c"）

//獲取繪圖環(huán)境

var c=c.getContext（"2d"）

var img=new Image;

img.src="img/02.jpg"

img.onload=function（）{

c.drawImage（img,10,20,160,200）

}

插入字體

//字體大小 樣式

c.font="30px imapct"

c.fillText（"全站最強(qiáng)",200,200）

//字體空心

c.strokeText（"Big smile!",200,200）

svg

svg繪制矢量圖

svg使用xml格式繪制圖形

svg要有一個(gè)根節(jié)點(diǎn) 叫svg標(biāo)簽 相當(dāng)于html

<svg xmlns="" version="1.1">

<circle cx="100" cy="50" r="40" stroke="black"

stroke-width="2" fill="red" />

</svg>

<svg xmlns="" version="1.1" width="500px" height="400px">

</svg>

svg如果不設(shè)置大小，默認(rèn)占用面積 3008*150

1.定義矩形

rect標(biāo)簽有：

width height 矩形寬高

fill 定義矩形填充顏色（rgb值、顏色名或16進(jìn)制）

stroke-width 定義矩形邊框?qū)挾?/p>

stroke 定義矩形邊框以及顏色

x 定義矩形左側(cè)位置（矩形到瀏覽器窗口左側(cè)距離）

y 定義矩形頂端位置（矩形到瀏覽器窗口頂端位置）

fill-opacity 定義填充顏色透明度

stroke-opacity 定義邊框顏色透明度

Rx Ry 可以使矩形產(chǎn)生圓角

<!--矩形-->

<rect width="100px" height="100px" x="50" y="250" rx="20" ry="20"  style="fill:pink;stroke-width: 5;stroke: red;"></rect>

fill-opactty和opacity的區(qū)別？

fill-opacity只改變填充顏色透明度 opacity改變fill和stroke的透明度都改變

2.定義圓

circle cx cy 定義圓點(diǎn)的 x和y坐標(biāo)。如果省略cx和cy，圓的中心會設(shè)置為（0,0）

r定義半徑

<!--圓形-->

<circle cx="200" cy="200" r="50" style="stroke:"pink"; fill:'red';">

</circle>

3.定義橢圓

橢圓和圓很相似。不同之處在于橢圓有不同的x和y半徑，而圓的x和y半徑是相同的

ellipse cx cy定義圓中心的x，y坐標(biāo)

rx 定義水平半徑

ry 定義垂直半徑

<!--橢圓-->

<ellipse cx="300" cy="340" rx="100" ry="50" style="fill: yellowgreen;"></ellipse>

4.定義直線

line x1 y1 定義起始坐標(biāo) x2 y2定義結(jié)束坐標(biāo) 必須結(jié)合 stroke

<!----直線---->

<line x1="150" y1="250" x2="100" y2="100" style="stroke: lawngreen;"></line><br><br>

5.定義多邊形

polygon poinits=“定義多邊形每個(gè)角x和y坐標(biāo)”

<!--定義多邊形-->

<polygon points="240,10 330,190 290,210" style="fill: pink; stroke: red;">

</polygon>

6.定義曲線（折線）

polyline poinits“折點(diǎn)的坐標(biāo)”

<!--曲線-->

<polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160 "style="stroke-width:5 ; stroke: pink; fill: none; ">

7.定義路徑

d=“定義路徑指令”

M 是起點(diǎn)坐標(biāo)

L 是相鄰點(diǎn)坐標(biāo)

Z是讓路徑構(gòu)成閉合回路

H代表水平劃線 默認(rèn)y軸上值一模一樣

V 代表垂直的線條 默認(rèn)x軸上值一樣

A 后面跟七個(gè)值

<!--定義路徑-->

<path id="path" d="M100 50 A60 60 0 1 0  300 50 " stroke="red" fill="none"></path>

8.g 用于相關(guān)元素進(jìn)行組合

<g fill="pink" stroke="black" cx="60" cy="50" transform="translate（100,50）">

<circle  r="30" ></circle>

<circle  r="10" fill="blue" ></circle>

</g>

g身上的屬性 子元素都會繼承 但是g上的屬性都必須顯現(xiàn)屬性，不是svg的私有屬性，比如g上的圓心坐標(biāo)不行

transform 轉(zhuǎn)換svg中的一個(gè)屬性 translate rotate scale

平移旋轉(zhuǎn) 都是以起點(diǎn) 0 0 （svg的左上角） 點(diǎn)為參考點(diǎn) 而css3中以元素的中心點(diǎn)為參考點(diǎn)

text 用于定義文本 xy xy的值在字體左下角

<!----txte---->

<text stroke="blue" x="400" y="400" font-size="20" text-anchor="middle">哈哈哈哈</text>

9.繪制圖片

<!----image---->

<image x="80" y="80" width="100" height="100" xlink:href="02.jpg"></image>

10.use 用于復(fù)制元素 xy

xy是相對原始元素的坐標(biāo)位置 不是相對svg的00點(diǎn)坐標(biāo)

<!----use---->

<circle cx="40" id="a" cy="40" r="10" translate="100,0" fill="blue"></circle>

<use x="10" y="10" xlink:href="#a"></use>

11.animate 寫在需要?jiǎng)赢嬙氐闹虚g

<circle cx="250" cy="310" r="15" fill="lightblue">

<animate attributeName="cy" from="310" to="690" dur="2s" repeatCount="indefinite">

</circle>

關(guān)于“canvas與svg使用實(shí)例分析”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“canvas與svg使用實(shí)例分析”知識都有一定的了解，大家如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

當(dāng)前文章：canvas與svg使用實(shí)例分析
分享網(wǎng)址：http://aaarwkj.com/article20/ipohco.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供用戶體驗(yàn)、網(wǎng)站維護(hù)、動態(tài)網(wǎng)站、Google、微信公眾號、外貿(mào)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)