-
translate的坐標變換時疊加的
變化完后要使用
context.translate(..., ... )把坐標變換回來
簡便方法
context.save()??和?context.restore()?成對出現(xiàn)?實現(xiàn)坐標變換和還原
查看全部 -
非零環(huán)繞原則，可以繪制空心圓等
查看全部 -
可以用該屬性的destination-out來制作刮刮樂效果
查看全部 -
變換矩陣說明
查看全部 -
操作相對應的參數(shù)
transform(a,b,c,d,e,f);
查看全部 -
五角星繪制
查看全部 -
筆記 -- 1
查看全部 -
bianhanjuz
查看全部 -
biji - 1
查看全部 -
筆記 - 1
查看全部 -
筆記記錄 - 4
查看全部 -
筆記記錄 - 3
查看全部 -
筆記記錄 - 2
查看全部 -
筆記記錄 - 1
查看全部 -
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <title>canvas</title>
</head>
<body>
? ? <canvas id="canvas" width="1024" height="768"></canvas>
<script>
? ? var canvas = document.getElementById('canvas');
? ? canvas.width = 800;
? ? canvas.height = 800;
? ? var ctx = canvas.getContext('2d');
? ? fillMoon(ctx, 2, 400, 400, 300, 0);
? ? function fillMoon(ctx, d, x, y, R, rot, fillColor = '#fb5') {
? ? ? ? ctx.save();
? ? ? ? ctx.translate(x, y);
? ? ? ? ctx.rotate(rot * Math.PI / 180);
? ? ? ? ctx.scale(R, R);
? ? ? ? pathMoon(ctx, d);
? ? ? ? ctx.fillStyle = fillColor;
? ? ? ? ctx.fill();
? ? ? ? ctx.restore();
? ? }
? ? function pathMoon(ctx, d) {
? ? ? ? ctx.beginPath();
? ? ? ? ctx.arc(0, 0, 1, Math.PI/2, 3*Math.PI/2, true);
? ? ? ? ctx.moveTo(0, -1);
? ? ? ? ctx.arcTo(d, 0, 0, 1, (Math.sqrt(1+d*d)) /d);
? ? ? ? ctx.closePath();
? ? }
? ? function dis(x1, y1, x2, y2) {
? ? ? ? return Math.sqrt((x1-x2)*(x1-x2) + (y1-y2)*(y1-y2));
? ? }
</script>
</html>
查看全部
舉報