成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

學(xué)習(xí)canvas 過(guò)程中的幾點(diǎn)總結(jié)

notebin / 1625人閱讀

摘要：默認(rèn)尺寸為或者如果兩個(gè)尺寸不一致，那么畫(huà)出來(lái)的圖形，和想象中的圖形是有差距的。

1.canvas的畫(huà)布大小與canvas元素大小

canvas尺寸分為兩種，一種是canvas元素本身的尺寸，另一種是canvas畫(huà)布的尺寸

canvas本身尺寸可以通過(guò)style樣式來(lái)設(shè)置

.canvas{
    width:100px;
    height:100px;
}
/* 設(shè)置了元素在瀏覽器可以看見(jiàn)的尺寸 */

canvas畫(huà)布尺寸通過(guò)元素width和height兩個(gè)屬性設(shè)置，也可以通過(guò)js給畫(huà)布設(shè)置尺寸。默認(rèn)尺寸為300*150

或者

var canvas=document.getElementById("canvas");
canvas.width = 100;
canvas.height = 100;

如果兩個(gè)尺寸不一致，那么畫(huà)出來(lái)的圖形，和想象中的圖形是有差距的。

2.扇形漸變的規(guī)律

扇形漸變的語(yǔ)法：

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.createRadialGradient(x1, y1, r1, x2, y2, r2);
// 創(chuàng)建一個(gè)從以(x1, y1)點(diǎn)為圓心、r1為半徑的圓到以(x2, y2)點(diǎn)為圓心、r2為半徑的圓的徑向漸變對(duì)象

漸變規(guī)律可以分為兩種情況：

兩個(gè)圓同圓心，或者兩個(gè)圓屬于包含關(guān)系

漸變從一個(gè)圓的圓周向另一個(gè)圓的圓周輻射漸變

// 包含
var grb = ctx.createRadialGradient(245,175,20,285,175,75);
grb.addColorStop(0, "red");
grb.addColorStop(0.5, "green");
grb.addColorStop(1, "yellow");
ctx.fillStyle = grb;

ctx.fillRect(210,100,150,150);

效果如下圖的包含關(guān)系：

相交或相離

在兩個(gè)圓的切線(xiàn)與圓周組成范圍內(nèi)，從開(kāi)始圓的圓周向結(jié)束圓的圓周漸變

// 相交
grb = ctx.createRadialGradient(440,175,75,520,175,50);
grb.addColorStop(0, "red");
grb.addColorStop(0.5, "green");
grb.addColorStop(1, "yellow");
ctx.fillStyle = grb;

ctx.fillRect(380,100,200,150);

// 相離
grb = ctx.createRadialGradient(675,175,75,900,175,50);
grb.addColorStop(0, "red");
grb.addColorStop(0.5, "green");
grb.addColorStop(1, "yellow");
ctx.fillStyle = grb;

ctx.fillRect(600,100,300,150);

效果如上圖的相交和相離，在切線(xiàn)與圓周組成的范圍內(nèi)漸變

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/111765.html

相關(guān)文章

  • sass學(xué)習(xí)總結(jié)的幾點(diǎn)

    摘要：詳細(xì)的學(xué)習(xí)網(wǎng)址中文網(wǎng)的幾大特性變量嵌套混合器繼承了解了保持條理性和可讀性的最基本的三個(gè)方法嵌套導(dǎo)入和注釋。為了解決這種以及其他情況，提供了一個(gè)特殊結(jié)構(gòu)這意味著這條規(guī)則將會(huì)被應(yīng)用到選擇器，元素內(nèi)鏈接的所有子元素在被時(shí)都會(huì)變成紅色。 詳細(xì)的學(xué)習(xí)網(wǎng)址：http://www.sasschina.com/guide/ saa中文網(wǎng) Sass的幾大特性： 變量 嵌套 混合器@minxin...

    plus2047 評(píng)論0 收藏0

  • 關(guān)于程序員寫(xiě)好 ppt 的幾點(diǎn)總結(jié) - 前端張大胖

    摘要：背景程序員日常工作中最多的應(yīng)該是接收需求編碼實(shí)現(xiàn)需求。內(nèi)容決定形式，形式依賴(lài)于內(nèi)容，并隨內(nèi)容的發(fā)展而發(fā)展。我也只做到了圖形搭配階段，配圖就比較麻煩，如果要是能確定關(guān)鍵詞也可以，百度搜索即可。具體的網(wǎng)站百度找下就可以了，就不發(fā)地址了。 背景 程序員日常工作中最多的應(yīng)該是接收需求、編碼實(shí)現(xiàn)需求。但也有些時(shí)候需要做一些非代碼的文字工作。 比如做述職報(bào)告、工作總結(jié)等，這些一般的都是通過(guò) ppt...

    Cobub 評(píng)論0 收藏0

  • 關(guān)于程序員寫(xiě)好 ppt 的幾點(diǎn)總結(jié) - 前端張大胖

    摘要：背景程序員日常工作中最多的應(yīng)該是接收需求編碼實(shí)現(xiàn)需求。內(nèi)容決定形式，形式依賴(lài)于內(nèi)容，并隨內(nèi)容的發(fā)展而發(fā)展。我也只做到了圖形搭配階段，配圖就比較麻煩，如果要是能確定關(guān)鍵詞也可以，百度搜索即可。具體的網(wǎng)站百度找下就可以了，就不發(fā)地址了。 背景 程序員日常工作中最多的應(yīng)該是接收需求、編碼實(shí)現(xiàn)需求。但也有些時(shí)候需要做一些非代碼的文字工作。 比如做述職報(bào)告、工作總結(jié)等，這些一般的都是通過(guò) ppt...

    shiyang6017 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<