Canvas学习笔记

常见问题 2019-02-05

反正我是觉得markdown不如博客园的默认编辑器好用= = 把有道的笔记搬到博客园。。

网视频《  》&《  》笔记

↑老师讲的很好，不过语速很慢，二倍速刚好。

通过  即可创建一个canvas。

不建议直接使用css的方式指定大小。css指定的是显示的大小，通过height和width指定的是显示的大小以及分辨率的大小。

JavaScript中指定canvas宽高。

canvas = document.getElementById('canvas'canvas.width = 1024<span style="color: #000000;">;
canvas.height = 768;

canvas 绘图主要通过 canvas.getContext 的获得的上下文的 api 实现。

context = canvas.getContext('2d');

canvas坐标轴 ：左上角为原点，向右为x轴，向下为y轴。

canvas 是基于状态的绘图。

eto(100,100eto(700,700eto(100,100context.fillStyle = 'rgb(233,233,233)'<span style="color: #000000;">;
context.fill();

context.linewidth = 5<span style="color: #000000;">;
context.strokeStyle = '#123456'<span style="color: #000000;">;

context.stroke();

context.beginPath();
context.moveto(200,600<span style="color: #000000;">);
context.strokeStyle = 'black'<span style="color: #000000;">;
context.stroke();

moveto(x,y) 画笔移到(x,y)。

lineto(x,y) 从当前点到(x,y)画一条。

stroke() 把当前的路径绘制出来，但并不会清空当前状态（也就是说下一次调用stroke之前绘制的会再次被绘制）。

fill() 如果路径不是封闭的，会把路径首尾相连。

beginPath() 开始一段新的路径，也就是说，此后再次调用stroke()的时候，之前的线条不会被重新绘制。同时清空当前坐标。（紧接着的lineto()相当于moveto()）

closePath() 结束一段路径。如果路径没有封闭，就将路径首尾连接起来。

context.linewidth,context.strokeStyle 设置绘制线条宽度和样式。

context.fillStyle 设置填充样式。

绘制圆和弧

startAngle,endAngle, anticlockwise = 默认为false context.arc(300,300,200,1.5 * Math.PI,);

通过定时器不断更新状态重新绘制

清空指定区域   

 

一个七巧板">画一个七巧板

display: none;" onclick="cnblogs_code_hide('7cf48c9f-e4d4-4bb1-9f1e-1103bceac235',event)" src="https://www.jb51.cc/res/2019/02-05/22/405b18b4b6584ae338e0f6ecaf736533.gif" alt="">
Meta Document display: block;" 
<span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;script</span><span style="color: #0000ff;"&gt;></span>
    <span style="background-color: #f5f5f5; color: #0000ff;"&gt;var</span><span style="background-color: #f5f5f5; color: #000000;"&gt; t<a href="https://www.jb51.cc/tag/angr/" target="_blank" class="keywords">angr</a>am </span><span style="background-color: #f5f5f5; color: #000000;"&gt;=</span><span style="background-color: #f5f5f5; color: #000000;"&gt; [
        {p:[{x:</span><span style="background-color: #f5f5f5; color: #000000;"&gt;0</span><span style="background-color: #f5f5f5; color: #000000;"&gt;,y:</span><span style="background-color: #f5f5f5; color: #000000;"&gt;0</span><span style="background-color: #f5f5f5; color: #000000;"&gt;},{x:</span><span style="background-color: #f5f5f5; color: #000000;"&gt;800</span><span style="background-color: #f5f5f5; color: #000000;"&gt;,{x:</span><span style="background-color: #f5f5f5; color: #000000;"&gt;400</span><span style="background-color: #f5f5f5; color: #000000;"&gt;,y:</span><span style="background-color: #f5f5f5; color: #000000;"&gt;400</span><span style="background-color: #f5f5f5; color: #000000;"&gt;}],color:</span><span style="background-color: #f5f5f5; color: #000000;"&gt;"</span><span style="background-color: #f5f5f5; color: #000000;"&gt;green</span><span style="background-color: #f5f5f5; color: #000000;"&gt;"</span><span style="background-color: #f5f5f5; color: #000000;"&gt;},{p:[{x:</span><span style="background-color: #f5f5f5; color: #000000;"&gt;0</span><span style="background-color: #f5f5f5; color: #000000;"&gt;,y:</span><span style="background-color: #f5f5f5; color: #000000;"&gt;400</span><span style="background-color: #f5f5f5; color: #000000;"&gt;},{x:</span><span style="background-color: #f5f5f5; color: #000000;"&gt;0</span><span style="background-color: #f5f5f5; color: #000000;"&gt;,y:</span><span style="background-color: #f5f5f5; color: #000000;"&gt;800</span><span style="background-color: #f5f5f5; color: #000000;"&gt;}],color:</span><span style="background-color: #f5f5f5; color: #000000;"&gt;"</span><span style="background-color: #f5f5f5; color: #000000;"&gt;red</span><span style="background-color: #f5f5f5; color: #000000;"&gt;"</span><span style="background-color: #f5f5f5; color: #000000;"&gt;},{p:[{x:</span><span style="background-color: #f5f5f5; color: #000000;"&gt;800</span><span style="background-color: #f5f5f5; color: #000000;"&gt;,{x:</span><span style="background-color: #f5f5f5; color: #000000;"&gt;600</span><span style="background-color: #f5f5f5; color: #000000;"&gt;,y:</span><span style="background-color: #f5f5f5; color: #000000;"&gt;600</span><span style="background-color: #f5f5f5; color: #000000;"&gt;},y:</span><span style="background-color: #f5f5f5; color: #000000;"&gt;200</span><span style="background-color: #f5f5f5; color: #000000;"&gt;}],color:</span><span style="background-color: #f5f5f5; color: #000000;"&gt;"</span><span style="background-color: #f5f5f5; color: #000000;"&gt;yellow</span><span style="background-color: #f5f5f5; color: #000000;"&gt;"</span><span style="background-color: #f5f5f5; color: #000000;"&gt;},{p:[{x:</span><span style="background-color: #f5f5f5; color: #000000;"&gt;600</span><span style="background-color: #f5f5f5; color: #000000;"&gt;,y:</span><span style="background-color: #f5f5f5; color: #000000;"&gt;200</span><span style="background-color: #f5f5f5; color: #000000;"&gt;},color:</span><span style="background-color: #f5f5f5; color: #000000;"&gt;"</span><span style="background-color: #f5f5f5; color: #000000;"&gt;blue</span><span style="background-color: #f5f5f5; color: #000000;"&gt;"</span><span style="background-color: #f5f5f5; color: #000000;"&gt;},{p:[{x:</span><span style="background-color: #f5f5f5; color: #000000;"&gt;400</span><span style="background-color: #f5f5f5; color: #000000;"&gt;,y:</span><span style="background-color: #f5f5f5; color: #000000;"&gt;800</span><span style="background-color: #f5f5f5; color: #000000;"&gt;},{x:</span><span style="background-color: #f5f5f5; color: #000000;"&gt;200</span><span style="background-color: #f5f5f5; color: #000000;"&gt;,y:</span><span style="background-color: #f5f5f5; color: #000000;"&gt;600</span><span style="background-color: #f5f5f5; color: #000000;"&gt;}],color:</span><span style="background-color: #f5f5f5; color: #000000;"&gt;"</span><span style="background-color: #f5f5f5; color: #000000;"&gt;pink</span><span style="background-color: #f5f5f5; color: #000000;"&gt;"</span><span style="background-color: #f5f5f5; color: #000000;"&gt;},{p:[{x:</span><span style="background-color: #f5f5f5; color: #000000;"&gt;200</span><span style="background-color: #f5f5f5; color: #000000;"&gt;,color:</span><span style="background-color: #f5f5f5; color: #000000;"&gt;"</span><span style="background-color: #f5f5f5; color: #000000;"&gt;black</span><span style="background-color: #f5f5f5; color: #000000;"&gt;"</span><span style="background-color: #f5f5f5; color: #000000;"&gt;},color:</span><span style="background-color: #f5f5f5; color: #000000;"&gt;"</span><span style="background-color: #f5f5f5; color: #000000;"&gt;gray</span><span style="background-color: #f5f5f5; color: #000000;"&gt;"</span><span style="background-color: #f5f5f5; color: #000000;"&gt;}
    ];

    window.onload </span><span style="background-color: #f5f5f5; color: #000000;"&gt;=</span> <span style="background-color: #f5f5f5; color: #0000ff;"&gt;function</span><span style="background-color: #f5f5f5; color: #000000;"&gt;() {
        </span><span style="background-color: #f5f5f5; color: #0000ff;"&gt;var</span><span style="background-color: #f5f5f5; color: #000000;"&gt; canvas </span><span style="background-color: #f5f5f5; color: #000000;"&gt;=</span><span style="background-color: #f5f5f5; color: #000000;"&gt; document.getElementById(</span><span style="background-color: #f5f5f5; color: #000000;"&gt;'</span><span style="background-color: #f5f5f5; color: #000000;"&gt;canvas</span><span style="background-color: #f5f5f5; color: #000000;"&gt;'</span><span style="background-color: #f5f5f5; color: #000000;"&gt;);
        </span><span style="background-color: #f5f5f5; color: #0000ff;"&gt;var</span><span style="background-color: #f5f5f5; color: #000000;"&gt; context </span><span style="background-color: #f5f5f5; color: #000000;"&gt;=</span><span style="background-color: #f5f5f5; color: #000000;"&gt; canvas.getContext(</span><span style="background-color: #f5f5f5; color: #000000;"&gt;'</span><span style="background-color: #f5f5f5; color: #000000;"&gt;2d</span><span style="background-color: #f5f5f5; color: #000000;"&gt;'</span><span style="background-color: #f5f5f5; color: #000000;"&gt;);
        </span><span style="background-color: #f5f5f5; color: #0000ff;"&gt;for</span><span style="background-color: #f5f5f5; color: #000000;"&gt; (</span><span style="background-color: #f5f5f5; color: #0000ff;"&gt;var</span><span style="background-color: #f5f5f5; color: #000000;"&gt; i </span><span style="background-color: #f5f5f5; color: #000000;"&gt;=</span> <span style="background-color: #f5f5f5; color: #000000;"&gt;0</span><span style="background-color: #f5f5f5; color: #000000;"&gt;; i </span><span style="background-color: #f5f5f5; color: #000000;"&gt;<</span><span style="background-color: #f5f5f5; color: #000000;"&gt; t<a href="https://www.jb51.cc/tag/angr/" target="_blank" class="keywords">angr</a>am.length; i</span><span style="background-color: #f5f5f5; color: #000000;"&gt;++</span><span style="background-color: #f5f5f5; color: #000000;"&gt;) {
            draw(t<a href="https://www.jb51.cc/tag/angr/" target="_blank" class="keywords">angr</a>am[i],context);
        }
    }

    </span><span style="background-color: #f5f5f5; color: #0000ff;"&gt;function</span><span style="background-color: #f5f5f5; color: #000000;"&gt; draw(piece,ctx) {
        ctx.beginPath();
        ctx.mov<a href="https://www.jb51.cc/tag/eto/" target="_blank" class="keywords">eto</a>(piece.p[</span><span style="background-color: #f5f5f5; color: #000000;"&gt;0</span><span style="background-color: #f5f5f5; color: #000000;"&gt;].x,piece.p[</span><span style="background-color: #f5f5f5; color: #000000;"&gt;0</span><span style="background-color: #f5f5f5; color: #000000;"&gt;].y);
        </span><span style="background-color: #f5f5f5; color: #0000ff;"&gt;for</span><span style="background-color: #f5f5f5; color: #000000;"&gt; (</span><span style="background-color: #f5f5f5; color: #0000ff;"&gt;var</span><span style="background-color: #f5f5f5; color: #000000;"&gt; i </span><span style="background-color: #f5f5f5; color: #000000;"&gt;=</span> <span style="background-color: #f5f5f5; color: #000000;"&gt;1</span><span style="background-color: #f5f5f5; color: #000000;"&gt;; i </span><span style="background-color: #f5f5f5; color: #000000;"&gt;<</span><span style="background-color: #f5f5f5; color: #000000;"&gt; piece.p.length; i</span><span style="background-color: #f5f5f5; color: #000000;"&gt;++</span><span style="background-color: #f5f5f5; color: #000000;"&gt;) {
            ctx.lin<a href="https://www.jb51.cc/tag/eto/" target="_blank" class="keywords">eto</a>(piece.p[i].x,piece.p[i].y);
        }
        ctx.closePath();
        ctx.fillStyle </span><span style="background-color: #f5f5f5; color: #000000;"&gt;=</span><span style="background-color: #f5f5f5; color: #000000;"&gt; piece.color;
        ctx.fill();
    }
</span><span style="color: #0000ff;"&gt;</</span><span style="color: #800000;"&gt;script</span><span style="color: #0000ff;"&gt;></span>

<span style="color: #0000ff;"></<span style="color: #800000;">body<span style="color: #0000ff;">>
<span style="color: #0000ff;"></<span style="color: #800000;">html<span style="color: #0000ff;">>

效果

index.html

display: none;" onclick="cnblogs_code_hide('0a079a31-8337-4c15-b456-be6788e2e82d',event)" src="https://www.jb51.cc/res/2019/02-05/22/405b18b4b6584ae338e0f6ecaf736533.gif" alt="">
Meta 不支持Canvas，请更换浏览器后再试 
<span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;script </span><span style="color: #ff0000;"&gt;src</span><span style="color: #0000ff;"&gt;="digit.js"</span><span style="color: #0000ff;"&gt;></</span><span style="color: #800000;"&gt;script</span><span style="color: #0000ff;"&gt;></span>
<span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;script </span><span style="color: #ff0000;"&gt;src</span><span style="color: #0000ff;"&gt;="countdown.js"</span><span style="color: #0000ff;"&gt;></</span><span style="color: #800000;"&gt;script</span><span style="color: #0000ff;"&gt;></span>

<span style="color: #0000ff;"></<span style="color: #800000;">body<span style="color: #0000ff;">>
<span style="color: #0000ff;"></<span style="color: #800000;">html<span style="color: #0000ff;">>

countdown.js 和老师写的不完全一样，因为我懒得看了，所以小部分偷懒自己瞎写的

display: none;" onclick="cnblogs_code_hide('4563bf9e-5b2c-41e2-aba8-d0df6099276f',event)" src="https://www.jb51.cc/res/2019/02-05/22/405b18b4b6584ae338e0f6ecaf736533.gif" alt="">
WINDOW_WIDTH = 1024 WINDOW_HEIGHT = 768 RADIUS = 8 MARGIN_TOP = 60 MARGIN_LEFT = 30<span style="color: #0000ff;">var curShowTimeSeconds = 0<span style="color: #000000;">;

<span style="color: #0000ff;">var balls =<span style="color: #000000;"> [];
const colors = ['#ff5b5b','#a2ff95','#95ffc8','#95b2ff','#c195ff','#ff95f4','#ff95c3','#ffe295'<span style="color: #000000;">];

window.onload = <span style="color: #0000ff;">function<span style="color: #000000;">() {

WINDOW_HEIGHT </span>= document.body.clientHeight-1<span style="color: #000000;"&gt;;
WINDOW_WIDTH </span>= document.body.clientWidth-1<span style="color: #000000;"&gt;;

MARGIN_LEFT </span>= Math.round(WINDOW_WIDTH / 10<span style="color: #000000;"&gt;);
RADIUS </span>= Math.round(WINDOW_WIDTH * 4 / 5 / 108) - 1<span style="color: #000000;"&gt;;

MARGIN_TOP </span>= Math.round(WINDOW_HEIGHT / 5<span style="color: #000000;"&gt;);

</span><span style="color: #0000ff;"&gt;var</span> canvas = document.getElementById('canvas'<span style="color: #000000;"&gt;);
</span><span style="color: #0000ff;"&gt;var</span> context = canvas.getContext('2d'<span style="color: #000000;"&gt;);

canvas.width </span>=<span style="color: #000000;"&gt; WINDOW_WIDTH;
canvas.height </span>=<span style="color: #000000;"&gt; WINDOW_HEIGHT;

console.log(canvas);

curShowTimeSeconds </span>= 3 * 3600; <span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt; 倒计时三小时</span>

<span style="color: #0000ff;"&gt;var</span> timer =<span style="color: #000000;"&gt; setInterval(
    </span><span style="color: #0000ff;"&gt;function</span><span style="color: #000000;"&gt;() {
        render(context);
        renderBalls(context);
        curShowTimeSeconds </span>-= 1/50;

<span style="color: #000000;"> update();
<span style="color: #0000ff;">if (curShowTimeSeconds <= 0<span style="color: #000000;">) {
curShowTimeSeconds = 0<span style="color: #000000;">;
clearInterval(timer);
}
},20<span style="color: #000000;">
)
}

<span style="color: #0000ff;">function<span style="color: #000000;"> update() {
<span style="color: #0000ff;">var tempBalls =<span style="color: #000000;"> [];
<span style="color: #0000ff;">for (<span style="color: #0000ff;">var<span style="color: #000000;"> ball of balls) {
ball.x +=<span style="color: #000000;"> ball.vx;
ball.y +=<span style="color: #000000;"> ball.vy;
ball.vy +=<span style="color: #000000;"> ball.g;
<span style="color: #0000ff;">if (ball.y >= 768 -<span style="color: #000000;"> ball.r) {
ball.y = 768 -<span style="color: #000000;"> ball.r;
ball.vy = -ball.vy * 0.75<span style="color: #000000;">;
}
<span style="color: #0000ff;">if (ball.x + RADIUS > 0 && ball.x - RADIUS <<span style="color: #000000;"> WINDOW_WIDTH) {
tempBalls.push(ball);
}
}
balls =<span style="color: #000000;"> tempBalls;

</span><span style="color: #0000ff;"&gt;var</span> seconds = curShowTimeSeconds % 60<span style="color: #000000;"&gt;;
</span><span style="color: #0000ff;"&gt;if</span> (Math.floor(curShowTimeSeconds) !== Math.floor(curShowTimeSeconds + 1/50)) {
    addBalls(MARGIN_LEFT + 78*(RADIUS+1),MARGIN_TOP,parseInt(seconds/10));
    addBalls(MARGIN_LEFT + 93*(RADIUS+1),parseInt(seconds%10<span style="color: #000000;"&gt;));
}

}

<span style="color: #0000ff;">function<span style="color: #000000;"> addBalls(x,y,num) {
<span style="color: #0000ff;">for (<span style="color: #0000ff;">var i = 0; i < digit[num].length; i++<span style="color: #000000;">) {
<span style="color: #0000ff;">for (<span style="color: #0000ff;">var j = 0; j < digit[num][i].length; j++<span style="color: #000000;">) {
<span style="color: #0000ff;">if (digit[num][i][j] === 1) { <span style="color: #008000;">//<span style="color: #008000;"> 点阵中1表示绘制
<span style="color: #000000;"> balls.push({
x: x+j2(RADIUS+1)+(RADIUS+1<span style="color: #000000;">),y: y+i2(RADIUS+1)+(RADIUS+1<span style="color: #000000;">),r: RADIUS,g: 1.5 +<span style="color: #000000;"> Math.random(),vx: Math.pow(-1,Math.ceil(Math.random() 1000)) 4<span style="color: #000000;">,vy: -10<span style="color: #000000;">,color: colors[Math.floor(Math.random() *<span style="color: #000000;"> colors.length)]
});
}
}
}
}

<span style="color: #0000ff;">function<span style="color: #000000;"> render(ctx) {
ctx.clearRect(0,0<span style="color: #000000;">,WINDOW_WIDTH,WINDOW_HEIGHT);

</span><span style="color: #0000ff;"&gt;var</span> hours = parseInt(curShowTimeSeconds / 3600<span style="color: #000000;"&gt;);
</span><span style="color: #0000ff;"&gt;var</span> minutes = parseInt((curShowTimeSeconds - hours * 3600) / 60<span style="color: #000000;"&gt;);
</span><span style="color: #0000ff;"&gt;var</span> seconds = curShowTimeSeconds % 60<span style="color: #000000;"&gt;;

renderDigit(MARGIN_LEFT,parseInt(hours</span>/10),ctx);
renderDigit(MARGIN_LEFT + 15*(RADIUS+1),parseInt(hours%10<span style="color: #000000;"&gt;),ctx)
renderDigit(MARGIN_LEFT </span>+ 30*(RADIUS + 1),10<span style="color: #000000;"&gt;,ctx)
renderDigit(MARGIN_LEFT </span>+ 39*(RADIUS+1),parseInt(minutes/10),ctx);
renderDigit(MARGIN_LEFT + 54*(RADIUS+1),parseInt(minutes%10<span style="color: #000000;"&gt;),ctx);
renderDigit(MARGIN_LEFT </span>+ 69*(RADIUS+1),ctx);
renderDigit(MARGIN_LEFT </span>+ 78*(RADIUS+1),parseInt(seconds/10),ctx);
renderDigit(MARGIN_LEFT + 93*(RADIUS+1),parseInt(seconds%10<span style="color: #000000;"&gt;),ctx);

}

<span style="color: #0000ff;">function<span style="color: #000000;"> renderBalls(ctx) {
balls.forEach((ball) =><span style="color: #000000;"> {
ctx.fillStyle =<span style="color: #000000;"> ball.color;
ctx.beginPath();
ctx.arc(ball.x,ball.y,ball.r,0,2 *<span style="color: #000000;"> Math.PI);
ctx.closePath();

    ctx.fill();
})

}

<span style="color: #008000;">//<span style="color: #008000;"> 在 (x,y) 为起点 画一个数字 num
<span style="color: #0000ff;">function<span style="color: #000000;"> renderDigit(x,num,ctx) {
ctx.fillStyle = 'rgb(0,102,153)'<span style="color: #000000;">;

</span><span style="color: #0000ff;"&gt;for</span> (<span style="color: #0000ff;"&gt;var</span> i = 0; i < digit[num].length; i++<span style="color: #000000;"&gt;) {
    </span><span style="color: #0000ff;"&gt;for</span> (<span style="color: #0000ff;"&gt;var</span> j = 0; j < digit[num][i].length; j++<span style="color: #000000;"&gt;) {
        </span><span style="color: #0000ff;"&gt;if</span> (digit[num][i][j] === 1) { <span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt; 点阵中1表示绘制</span>

<span style="color: #000000;"> ctx.beginPath();
ctx.arc(x+j2(RADIUS+1)+(RADIUS+1),y+i2(RADIUS+1)+(RADIUS+1),RADIUS,2*<span style="color: #000000;">Math.PI);
ctx.closePath();
ctx.fill();
}
}
}
}

digit.js 这个是复制老师的

display: none;" onclick="cnblogs_code_hide('0950cb1e-d6e3-47dc-9543-aec69bc65916',event)" src="https://www.jb51.cc/res/2019/02-05/22/405b18b4b6584ae338e0f6ecaf736533.gif" alt="">
digit = [0,1,00,[1,1 0,1 0, 1, 0, 1, 0, 1, 0, 0, 0,0 ];

封闭多边形的首尾交点会有缺口，使用  能解决这个问题。

绘制封闭多边形最好成对使用   和  

先绘制线条再填充颜色，边框的一半会被填充色覆盖。所以先绘制填充色再描边。

绘制矩形api： 

stroke();

ctx.fillRect(x,height);

ctx.strokeRect(x,height);

fillStyle 和 strokeStyle 支持所有CSS支持的颜色表示。

线条的属性

  • lineCap 线条两端的形状： butt （默认，平的）round（圆的） square（方的） 后面两个比较butt会突出来。只用于线段结尾处，不用于连接处。
  • lineJoin 线条连接处形状： miter（默认，尖角）bevel（平的） round（圆角）miter
  • lineJoin 为 miter 时，延长线长度大于miterLimit，会自动变为bevel。miterLimit 默认为10。

图形变换

位移、旋转、缩放。

  默认多个translate会叠加。

  

  不仅会缩放长度、宽度，还会缩放坐标、边框长度等属性。

save(); restore(); 成对出现，中间绘图状态不会对后面造成影响。

默认值1) b:水平倾斜(默认值0) c:垂直倾斜(默认值0) d:垂直缩放(默认值1) e:水平位移(默认值0) f:垂直位移(默认值0)

context.transform(); 效果会叠加

如果需要重新初始化矩阵变换的值，用:    会使得之前设置的 context.transform() 失效

样式填充

线性渐变

Grd =Grd.addColorStop(stop,color); 添加任意个 stop[0,1]之间的数字

<span style="color: #0000ff;">var Grd = context.createLinearGradient(200,800,800<span style="color: #000000;">);
Grd.addColorStop(0.0,'#f00'<span style="color: #000000;">);
Grd.addColorStop(1.0,'#000'<span style="color: #000000;">);
context.fillStyle = Grd;

径向渐变

teradialGradient(x1,r1,y2,r2); addColorStop(stop,color);

图片填充

bgImg = = 'https://img1.mukewang.com/5333a1bc00014e8302000200-140-140.jpg'= pattern = context.createPattern(bgImg,'repeat'=0,800

用另外一个canvas填充

bgCanvas = pattern = context.createPattern(bgCanvas,'repeat'=0,800<span style="color: #0000ff;">function<span style="color: #000000;"> createBackgroundCanvas() {
<span style="color: #0000ff;">var canvas = document.createElement('canvas'<span style="color: #000000;">);
canvas.width = 100<span style="color: #000000;">;
canvas.height = 100<span style="color: #000000;">;
<span style="color: #0000ff;">var context = canvas.getContext('2d'<span style="color: #000000;">);
drawStar(context,50,50,0); <span style="color: #008000;">//<span style="color: #008000;"> 之前的课程中写的的
<span style="color: #0000ff;">return<span style="color: #000000;"> canvas;
}

用 video 填充...

其中 repeat-style 可选值 no-repeat/repeat-x/repeat-y/repeat

绘制圆弧。

context.arc( centerX,startAngle,anticlockwise = false )

    (x1,y1)是控制点，(x0,y0,x1,y1)作为第一条切线， (x1,y2)作为第二条切线，radius是弧线半径圆弧。起点是当前所在点(x0,y0)，到第一个切点作直线，然后画弧，终点是第二个切点。

贝塞尔二次曲线。指定起始点，控制点，终点。

context.quadraticCurveto(control_x,control_y,targetx,targety);

贝塞尔三次曲线。指定起始点，控制点1，控制点2，终点。 

context.quadraticCurveto(control_x1,control_y1,control_x2,control_y2,targety);

文字渲染

文字样式

ctx.font = fontStyle; 默认 '20px sans-serif' ctx.font = font-style font-variant font-weight font-size font-strokeText(string,[maxlen]);

ctx.font = 'bold 40px Arial'<span style="color: #000000;">;
ctx.fillStyle = '#058'<span style="color: #000000;">;
ctx.strokeStyle = 'yellow'<span style="color: #000000;">;
ctx.fillText('文字',100,100<span style="color: #000000;">);
ctx.strokeText('文字',100);

文字对齐

水平对齐方式 left(default) center right

ctx.textAlign = 'left';

垂直对齐方式 top middle bottom alphabetic(default) hanging alphabetic

ctx.textBaseline = 'top';

文本的度量

获取文本宽度，使用前要先设置 font 属性

ctx.measureText(string).width;

阴影

context.shadowColor

context.shadowOffsetX

context.shadowOffsetY

context.shadowBlur

全局属性

ctx.globalAlpha=0.2;

globalCompositeOperation 属性设置或返回如何将一个源（新的）图像绘制到目标（已有）的图像上。

默认。在目标图像上显示源图像。显示源图像。源图像位于目标图像之外的部分是不可见的。显示源图像。只有目标图像内的源图像部分会显示，目标图像是透明的。显示源图像。只会显示目标图像之外源图像部分，目标图像是透明的。显示目标图像。显示目标图像。源图像之外的目标图像部分不会被显示。显示目标图像。只有源图像内的目标图像部分会被显示，源图像是透明的。显示目标图像。只有源图像外的目标图像部分会被显示，源图像是透明的。显示源图像 + 目标图像。copy显示源图像。忽略目标图像。 

、、、、、

相关文章

使用Nvdia显卡驱动自带的录屏功能录制游戏
显卡天梯图2024最新版 显卡性能天梯图2024最新排行榜
显卡天梯图2024最新版，显卡是电脑进行图形处理的重要设备，...
初始化电脑时出现问题怎么办 初始化电脑时出现问题解决方法
初始化电脑时出现问题怎么办，可以使用win系统的安装介质，连...
todesk远程开机怎么设置 todesk远程开机教程
todesk远程开机怎么设置，两台电脑要在同一局域网内，然后需...
油猴谷歌插件怎么安装 油猴谷歌插件安装教程
油猴谷歌插件怎么安装，可以通过谷歌应用商店进行安装，需要...
16g虚拟内存设置多少合适 16g虚拟内存最佳设置方法
虚拟内存这个名词想必很多人都听说过，我们在使用电脑的时候...