課程
/前端開發(fā)
/Html5
/Canvas玩兒轉紅包照片
如題,求代碼
2016-03-02
源自：Canvas玩兒轉紅包照片 3-5
正在回答
var wid = 800,
hei = 600,
canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d'),
clippingRegion = {},
radius = 70,
theAnimation; //控制show動畫
canvas.width = wid;
canvas.height = hei;
var image = new Image();
image.src = 'img/1.jpg';
image.onload = function() {
initCanvas();
}
function initCanvas() {
clearInterval(theAnimation);
clippingRegion = {
x: (Math.random() * (wid - radius * 2) + 50),
y: (Math.random() * (hei - radius * 2) + 50),
r: 0
};
var ID = setInterval(function(){
clippingRegion.r +=4;
draw(image, clippingRegion);
if(clippingRegion.r>=radius){
clearInterval(ID);
},30)
function draw(image, clippingRegion) {
ctx.clearRect(0, 0, wid, hei);
ctx.save();
setClippingRegion(clippingRegion);
ctx.drawImage(image, 0, 0, wid, hei);
ctx.restore();
function setClippingRegion(clippingRegion) {
ctx.beginPath();
ctx.arc(clippingRegion.x, clippingRegion.y, clippingRegion.r, 0, 2 * Math.PI, false);
ctx.clip();
function reset() {
function show() {
theAnimation = setInterval(function(){
clippingRegion.r +=20;
if(clippingRegion.r>=2*Math.max(wid,hei)){
有時候_1 提問者
初始半徑設為0px不就行了
舉報
教你玩兒轉微信紅包照片模糊效果，圖像展示效果，深入了解canvas
1 回答用clip剪輯之后會有一個黑色的圓圈
1 回答前面一切正常，但是設置剪輯區(qū)域時小圓顯示不出來。代碼如下，幫看看錯了嗎？
1 回答移動端剪裁顯示的區(qū)域與本來應該顯示的區(qū)域不對應，怎么辦
3 回答顯示后有位移
1 回答為什么$顯示有問題 看內容
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網(wǎng)安備11010802030151號
購課補貼聯(lián)系客服咨詢優(yōu)惠詳情
慕課網(wǎng)APP您的移動學習伙伴
掃描二維碼關注慕課網(wǎng)微信公眾號
2017-03-06
var wid = 800,
hei = 600,
canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d'),
clippingRegion = {},
radius = 70,
theAnimation; //控制show動畫
canvas.width = wid;
canvas.height = hei;
var image = new Image();
image.src = 'img/1.jpg';
image.onload = function() {
initCanvas();
}
function initCanvas() {
clearInterval(theAnimation);
clippingRegion = {
x: (Math.random() * (wid - radius * 2) + 50),
y: (Math.random() * (hei - radius * 2) + 50),
r: 0
};
var ID = setInterval(function(){
clippingRegion.r +=4;
draw(image, clippingRegion);
if(clippingRegion.r>=radius){
clearInterval(ID);
}
},30)
}
function draw(image, clippingRegion) {
ctx.clearRect(0, 0, wid, hei);
ctx.save();
setClippingRegion(clippingRegion);
ctx.drawImage(image, 0, 0, wid, hei);
ctx.restore();
}
function setClippingRegion(clippingRegion) {
ctx.beginPath();
ctx.arc(clippingRegion.x, clippingRegion.y, clippingRegion.r, 0, 2 * Math.PI, false);
ctx.clip();
}
function reset() {
initCanvas();
}
function show() {
theAnimation = setInterval(function(){
clippingRegion.r +=20;
draw(image, clippingRegion);
if(clippingRegion.r>=2*Math.max(wid,hei)){
clearInterval(theAnimation);
}
},30)
}
2016-03-03
初始半徑設為0px不就行了