分类导航

程序笔记发布时间：2019-11-07 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了Canvas学习笔记，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

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

慕课网视频《》&《》笔记

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

通过即可创建一个canvas。

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

JavaScript中指定canvas宽高。

canvas = document.getElementById('canvas');

canvas.width = 1024;
canvas.height = 768;

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

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

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

canvas 是基于状态的绘图。

ntext.beginPath(); context.moveTo(100,100); context.lineTo(700,700); context.lineTo(100,100); context.closePath();

context.fillStyle = 'rgb(233,233,233)';
context.fill();

context.lineWidth = 5;
context.strokeStyle = '#123456';

context.stroke();

context.beginPath();
context.moveTo(200,600);
context.strokeStyle = 'black';
context.stroke();

@H_382_94@moveTo(x,y) 画笔移到(x,y)。

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

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

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

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

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

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

context.fillStyle 设置填充样式。

绘制圆和弧

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

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

Tinterval( function() { render(); update(); },50 )

清空指定区域 );

https://cn.js-code.com/res/2019/02-05/22/1c53668bcee393edac0d7b3b3daff1ae.gif" alt="">https://cn.js-code.com/res/2019/02-05/22/405b18b4b6584ae338e0f6ecaf736533.gif" alt="">

titleDocumenttitle :1px solid #aaa; 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; tangram </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; tangram.length; i</span><span style="BACkground-color: #f5f5f5; color: #000000;"&gt;++</span><span style="BACkground-color: #f5f5f5; color: #000000;"&gt;) {
            draw(tangram[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.moveTo(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.lineTo(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>

</body>
</html>

title="Canvas学习笔记" alt="Canvas学习笔记" src="https://cn.js-code.com/res/2019/02-05/22/a31ce05f29229d8a82d347edbd5dc000.jpg" width="337" height="223">(坐标推导过程)

index.html

https://cn.js-code.com/res/2019/02-05/22/1c53668bcee393edac0d7b3b3daff1ae.gif" alt="">https://cn.js-code.com/res/2019/02-05/22/405b18b4b6584ae338e0f6ecaf736533.gif" alt="">

titletitle BACkground-color: #f5f5f5; color: #800000;"> html,bodyBACkground-color: #f5f5f5; color: #000000;">{BACkground-color: #f5f5f5; color: #ff0000;"> marginBACkground-color: #f5f5f5; color: #000000;">:BACkground-color: #f5f5f5; color: #0000ff;">0BACkground-color: #f5f5f5; color: #000000;">;BACkground-color: #f5f5f5; color: #ff0000;"> heightBACkground-color: #f5f5f5; color: #000000;">:BACkground-color: #f5f5f5; color: #0000ff;">100%BACkground-color: #f5f5f5; color: #000000;">; BACkground-color: #f5f5f5; color: #000000;">} :100%; height:100%;"

<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>

</body>
</html>

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

https://cn.js-code.com/res/2019/02-05/22/1c53668bcee393edac0d7b3b3daff1ae.gif" alt="">https://cn.js-code.com/res/2019/02-05/22/405b18b4b6584ae338e0f6ecaf736533.gif" alt="">

WINDOW_WIDTH = 1024 WINDOW_HEIGHT = 768 RADIUS = 8 MARGIN_TOP = 60 MARGIN_LEFT = 30var curshowTimeSeconds = 0;

var balls = [];
const colors = ['#ff5b5b','#a2ff95','#95ffc8','#95b2ff','#c195ff','#ff95f4','#ff95c3','#ffe295'];

window.onload = function() {

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;

update();
if (curshowTimeSeconds <= 0) {
curshowTimeSeconds = 0;
clearInterval(timer);
}
},20
)
}

function update() {
var tempBalls = [];
for (var ball of balls) {
ball.x += ball.vx;
ball.y += ball.vy;
ball.vy += ball.g;
if (ball.y >= 768 - ball.r) {
ball.y = 768 - ball.r;
ball.vy = -ball.vy * 0.75;
}
if (ball.x + RADIUS > 0 && ball.x - RADIUS < WINDOW_WIDTH) {
tempBalls.push(ball);
}
}
balls = 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;));
}

}

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

function render(ctX) {
ctx.clearRect(0,0,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);

}

function renderBalls(ctX) {
balls.forEach((ball) => {
ctx.fillStyle = ball.color;
ctx.beginPath();
ctx.arc(ball.x,ball.y,ball.r,0,2 * Math.PI);
ctx.closePath();

    ctx.fill();
})

}

// 在 (x,y) 为起点画一个数字 num
function renderDigit(x,num,ctX) {
ctx.fillStyle = 'rgb(0,102,153)';

</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>

ctx.beginPath();
ctx.arc(x+j2(RADIUS+1)+(RADIUS+1),y+i2(RADIUS+1)+(RADIUS+1),RADIUS,2*Math.PI);
ctx.closePath();
ctx.fill();
}
}
}
}

digit.js 这个是复制老师的

https://cn.js-code.com/res/2019/02-05/22/1c53668bcee393edac0d7b3b3daff1ae.gif" alt="">https://cn.js-code.com/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 ];

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

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

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

绘制矩形api：

.beginPath(); ctx.rect(x,width,height); ctx.closePath(); ctx.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。

title="Canvas学习笔记" alt="Canvas学习笔记" src="https://cn.js-code.com/res/2019/02-05/22/c2c783be068136f38cc593a9ea14f500.png" width="279" height="148">

图形变换

位移、旋转、缩放。

ntext.translate(x,y); 默认多个translate会叠加。

ntext.rotate(deg);

ntext.scale(sx,sy); 不仅会缩放长度、宽度，还会缩放坐标、边框长度等属性。

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

ntext.transform(a,b,c,d,e,f);

context.transform(); 效果会叠加

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

样式填充

线性渐变

grd =ntext.createLinearGradient(xstart,ystart,xend,yend); grd.addColorStop(stop,color);

var grd = context.createLinearGradient(200,800,800);
grd.addColorStop(0.0,'#f00');
grd.addColorStop(1.0,'#000');
context.fillStyle = grd;

径向渐变

); addColorStop(stop,color);

图片填充

bgImg = ); bgImg.src = 'https://img1.mukewang.com/5333a1bc00014e8302000200-140-140.jpg'.onload = { pattern = context.createPattern(bgImg,'repeat'); context.fillStyle =ntext.fillRect(0,800); }

用另外一个canvas填充

bgCanvas =BACkgroundCanvas(); pattern = context.createPattern(bgCanvas,'repeat'); context.fillStyle =ntext.fillRect(0,800);

function createBACkgroundCanvas() {
var canvas = document.createElement('canvas');
canvas.width = 100;
canvas.height = 100;
var context = canvas.getContext('2d');
drawStar(context,50,50,0); // 之前的课程中写的的
return canvas;
}

用 video 填充...

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

绘制圆弧。

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

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

title="Canvas学习笔记" alt="Canvas学习笔记" src="https://cn.js-code.com/res/2019/02-05/22/af1c595d41408fa72850aeee035a9986.png" width="171" height="166">

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

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

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

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

文字渲染

文字样式

ctx.font = fontStyle; ctx.font = font-style font-variant font-weight font-size font-String,x,[maxlen]); ctx.strokeText(String,[maxlen]);

ctx.font = 'bold 40px Arial';
ctx.fillStyle = '#058';
ctx.strokeStyle = 'yellow';
ctx.fillText('文字',100,100);
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 属性设置或返回如何将一个源（新的）图像绘制到目标（已有）的图像上。

source-oversource-atop不可见的。source-insource-outTination-overTination-atopTination-inTination-out

、、、、、

大佬总结

以上是大佬教程为你收集整理的Canvas学习笔记全部内容，希望文章能够帮你解决Canvas学习笔记所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

标签：

上一篇: Webpack学习笔记下一篇:JavaScript之scrollTop、scrollH...

猜你在找的程序笔记相关文章

You can't specify target table 'xxx' for update in FROM clause的解决 2022-07-21
【UNIAPP】上传视频，进度条的前台与后端 2022-07-21
十款代码表白特效，一个比一个浪漫！ 2022-07-04
作业3 2022-07-06
linux系统下部署项目访问报404错误的解决方法 2022-05-30
C++带有指针成员的类处理方式详解 2022-06-07
Linux——（1）基本命令 2022-07-21
JavaScript之正则表达式学习笔记 2019-11-07
Redux源码学习笔记 2019-11-07
Webpack学习笔记 2019-11-07

Canvas学习笔记

慕课网视频《 》&《 》笔记

通过定时器不断更新状态重新绘制 Tinterval( function() { render(); update(); },50 ) 清空指定区域 );

线条的属性

图形变换

样式填充

文字渲染

阴影

大佬总结

慕课网视频《》&《》笔记

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

Tinterval( function() { render(); update(); },50 )

清空指定区域 );