国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

學(xué)習(xí)canvas 過程中的幾點總結(jié)

notebin / 1593人閱讀

摘要：默認尺寸為或者如果兩個尺寸不一致，那么畫出來的圖形，和想象中的圖形是有差距的。

1.canvas的畫布大小與canvas元素大小

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

canvas本身尺寸可以通過style樣式來設(shè)置

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

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

或者

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

如果兩個尺寸不一致，那么畫出來的圖形，和想象中的圖形是有差距的。

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

扇形漸變的語法：

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

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

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

漸變從一個圓的圓周向另一個圓的圓周輻射漸變

// 包含
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)系：

相交或相離

在兩個圓的切線與圓周組成范圍內(nè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);

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

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/111765.html

相關(guān)文章

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

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

    plus2047 評論0 收藏0

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

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

    Cobub 評論0 收藏0

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

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

    shiyang6017 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<