第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

設(shè)置全局的透明度

設(shè)置圖形壓蓋順序

XY是陰影出來(lái)的長(zhǎng)寬

Blur是陰影的模糊程度

水平

垂直

font：字體，字型和字號(hào)

前倆都是控制點(diǎn)最后一個(gè)就是終止點(diǎn)

QuadraticCurvewTo中x1，y1就是起點(diǎn)，x2，y2就是終點(diǎn)

如何計(jì)算弧度的半徑

當(dāng)半徑過(guò)大時(shí)，x0、y0會(huì)先向反方向移動(dòng)以找到切點(diǎn)

arcTo函數(shù)將從(x0,y0)開(kāi)始繪制之后繪制一條弧線，這條弧線和這兩個(gè)線段所組成的折線相切并且其圓弧的半徑為radius
注意：起始點(diǎn)的坐標(biāo)是(x0 , y0)此時(shí)圓弧還沒(méi)有開(kāi)始，終止點(diǎn)的坐標(biāo)不一定是（x2 , y2）而是和（x1 , y1）（x2 , y2）這條線相切的地方
1.繪制的起始點(diǎn)一定是（x0,y0）但是并不意味著從（x0,y0）位置開(kāi)始圓弧就要開(kāi)始，由于arcTo()函數(shù)繪制的是和兩條折線相切的圓弧所以從真正的切點(diǎn)開(kāi)始
2.傳入的（x2,y2）完全是和（x1,y1）組成的一條切線，而（x2,y2）不一定是圓弧最終結(jié)束的位置它只是作為一個(gè)輔助線的結(jié)束位置，最終這個(gè)圓弧將結(jié)束在切點(diǎn)的位置
2.arcTo()的繪制起點(diǎn)是（x0,y0）但是（x0,y0）不一定是圓弧的切點(diǎn)，圓弧的繪制將停止于（x1,y1）（x2,y2）這條線的切點(diǎn)
3.(x0,y0)(x1,y1)(x2,y2)實(shí)質(zhì)上只是形成了兩條輔助線，這條輔助線告訴arcTO()函數(shù)應(yīng)該相切于哪個(gè)線

fillStyle__填充樣式（樣式是多種多樣的）；
var linearGrad = context.createLinearGradient(Xstar,Ystar,Xend,Yend);創(chuàng)建線性漸變（起始位置X，Y，結(jié)束位置X，Y）；
grd.addColorStop(stop,color);stop是（開(kāi)始填充）位置(0.0~1.0的數(shù)值)，color是要填充的顏色；這個(gè).addColorStop()至少要2個(gè)；

miterLimit只有當(dāng)lineJoin是miter時(shí)才有用，指的是內(nèi)角和外角之間的距離最大值是（設(shè)定值）當(dāng)像素超過(guò)這個(gè)值就會(huì)使用bevel的方式來(lái)顯示

結(jié)束閉合，完成閉環(huán)，在開(kāi)始繪制圖形開(kāi)頭和結(jié)尾加下列代碼

context.beginPath();

context.closePath();

推導(dǎo)圖

繪制多邊形的時(shí)候 要用beginpath和closepath包起來(lái)

這是我的一個(gè)混合式布局筆記，關(guān)于繪圖之旅的

哈哈

結(jié)合前幾節(jié)的教程，模擬了一個(gè)定時(shí)滾動(dòng)的齒輪，分享一下，共同進(jìn)步。

window.onload = function() {

var canvas = document.getElementById("start-canvas");

???? canvas.width = 800;

???? canvas.height = 800;

???? var ctx = canvas.getContext('2d');

???? let a = 0

???? var timer = setInterval(function() {

???????? a++;

???????? if (a <= 20) {

???????????? ctx.clearRect(0, 0, canvas.width, canvas.height);

???????????? mutiStart(ctx, 400, 400, 300, 150, 18, 5, 18 * a)

???????? } else {

???????? a = 0;

???? ????clearInterval(timer);

???? ????}

????}, 1000)

}

/**

* @param {Object} ctx

* @param {Object} x Star的X軸偏移量

* @param {Object} y Star的y軸偏移量

* @param {Object} R 外圓半徑

* @param {Object} r 內(nèi)圓半徑

* @param {Object} rot Star旋轉(zhuǎn)度數(shù)（順時(shí)針）

* @param {Object} multi 幾邊形

* @param {Object} angel? Star旋轉(zhuǎn)度數(shù)（逆時(shí)針）

*/

function mutiStart(ctx, x, y, R, r, rot, multi, angel) {

???? ctx.beginPath();

???? ctx.fillStyle = "#F1FA0C";

???? ctx.strokeStyle = "#F1FA0C";

???? for (var i = 0; i < multi; i++) {

???????? ctx.lineTo(Math.cos((angel + (360 / multi) * i - rot) / 180 * Math.PI) * R + x,

???????? y - Math.sin((angel + (360 / multi) * i - rot) / 180 * Math.PI) * R

???????? )

???????? ctx.lineTo(Math.cos((angel + 360 / (multi * 2) + (360 / multi) * i - rot) / 180 * Math.PI) * r + x,

???????? y - Math.sin((angel + 360 / (multi * 2) + (360 / multi) * i - rot) / 180 * Math.PI) * r

???????? )

}

???? ctx.closePath();

???? ctx.fill();

???? ctx.stroke();

}

if?(balls[i].x?-?balls[i].radius<=0)?{

????????????????????balls[i].vx?=?-balls[i].vx;

????????????????????balls[i].x?=?balls[i].radius;

????????????????}

????????????????if?(balls[i].x?+?balls[i].radius?>=?canvasWidth)?{

????????????????????balls[i].vx?=?-alls[i].vx;

????????????????????balls[i].x?=?canvasWidth-balls[i].radius;

????????????????}

????????????????if?(balls[i].y?-?balls[i].radius?<=?0)?{

????????????????????balls[i].vy?=?-balls[i].vy;

????????????????????balls[i].y?=?balls[i].radius;

????????????????}

????????????????if?(balls[i].y?+?alls[i].radius?>=?canvasHeight)?{

????????????????????balls[i].vy?=?-s[i].vy;

????????????????????balls[i].y?=?canvasHeight-balls[i].radius;

????????????????}

這是update函數(shù)部分

這是利用背景填充，原理跟ps里面剪貼蒙版效果一致

保存canvas狀態(tài)

第三課的例子地址

第三方Canvas圖形庫(kù)

兼容性代碼示例

老IE兼容問(wèn)題

Canvas標(biāo)準(zhǔn)

https://www.w3.org/TR/2dcontext/

https://html.spec.whatwg.org/

探照燈、聚光燈效果