html正方形裁剪成圆形,HTML5 Canvas 被圆形裁剪的马赛克

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

var w, h, cnt = 0,

dir = 1,

rd = 0,

deg2rads = Math.PI / 180;

var cv = document.getElementById('cv'),

cv2 = document.getElementById('cv2'),

ctx = cv.getContext('2d'),

ctx2 = cv2.getContext('2d');

var cols = ['#333333', '#000000', '#660000'];

var len = cols.length;

function update() {

var curve = 1000;

rd += dir * (Math.random() * 2);

ctx.fillStyle = cols[cnt % len];

cnt += 1;

ctx.beginPath();

ctx.moveTo(-rd, -rd);

ctx.bezierCurveTo(0, -rd - curve, 0, -rd - curve, +rd, -rd);

ctx.bezierCurveTo(rd + curve, 0, rd + curve, 0, +rd, rd);

ctx.bezierCurveTo(0, rd + curve, 0, rd + curve, -rd, +rd);

ctx.bezierCurveTo(-rd - curve, 0, -rd - curve, 0, -rd, -rd);

ctx.fill();

var rot = (rd * 2) * deg2rads;

ctx.transform(Math.cos(rot), -Math.sin(rot), Math.sin(rot), Math.cos(rot), 0, 0);

ctx2.save();

ctx2.beginPath();

ctx2.arc(w / 2, h / 2, Math.max(rd, 1), 0, 2 * Math.PI, false);

ctx2.clip();

ctx2.drawImage(cv, 0, 0);

ctx2.restore();

//cv2.style.transform = 'rotate('+cnt+'deg)';

if (rd > h / 2) {

rd = 0;

cols[2] = 'rgb(' + (100 + 55 * Math.random() | 0) + ',' + (100 + 55 * Math.random() | 0) + ',' + (100 + 55 * Math.random() | 0) + ')';

}

requestAnimationFrame(update);

}

function resize() {

cv.width = window.innerWidth;

cv.height = window.innerHeight;

cv2.width = window.innerWidth;

cv2.height = window.innerHeight;

w = cv.width;

h = cv.height;

ctx.globalCompositeOperation = 'destination-atop';

ctx.transform(1, 0, 0, 1, w / 2, h / 2);

}

resize();

update();

window.onresize = resize;