-
translate的坐标变换时叠加的
变化完后要使用
context.translate(..., ... )把坐标变换回来
简便方法
context.save() 和 context.restore() 成对出现 实现坐标变换和还原
查看全部 -
非零环绕原则，可以绘制空心圆等
查看全部 -
可以用该属性的destination-out来制作刮刮乐效果
查看全部 -
变换矩阵说明
查看全部 -
操作相对应的参数
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>
查看全部
举报