html 5キャンバスで画像を描き、影で回転させる方法

私はキャンバスの回転イメージを書き、ドロップシャドウを追加しようとしています。誰でもキャンバス内の画像に異なるシャドウスタイルを追加する方法を教えていただけます。私はそのために、この画像などのような影を落とす必要があります。 enter image description here html 5キャンバスで画像を描き、影で回転させる方法

context.shadowColor = "rgba(0, 0, 0, 0.3)"; 
context.shadowOffsetX = 6; 
context.shadowOffsetY = 6; 
context.shadowBlur = 3; 
context.drawImage(brolly, 25, 250);

フルコード：

window.addEventListener("load", init); 
 

 
var canvas = document.getElementById('c'); 
 
canvas.width = 360; 
 
canvas.height = 360; 
 
var context = canvas.getContext('2d'); 
 
var counter = 0; 
 

 
var logoImageh = new Image(); 
 
logoImageh.src = 'http://sirati.info/tmp/h.png'; 
 

 
var logoImagem = new Image(); 
 
logoImagem.src = 'http://sirati.info/tmp/m.png'; 
 

 
TO_RADIANS = Math.PI/180; 
 

 

 
function init() { 
 
    setInterval(loop, 100/30); 
 

 
} 
 

 
function loop() { 
 

 

 
    context.clearRect(0, 0, canvas.width, canvas.height); 
 
    drawRotatedImage(logoImageh, 180, 180, counter++); 
 
    drawRotatedImage(logoImagem, 180, 180, counter++); 
 

 
    counter += 1; 
 

 
} 
 

 

 
function drawRotatedImage(image, x, y, angle) { 
 

 
    context.save(); 
 
    context.translate(x, y); 
 
    context.rotate(angle * TO_RADIANS); 
 
    context.drawImage(image, -(image.width/2), -(image.height/2)); 
 
    context.restore(); 
 
}

body { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    text-align: center; 
 
} 
 
canvas { 
 
    outline: 0; 
 
    border: 1px solid #000; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
}

<html> 
 

 
<head> 
 

 
    <title>Simple</title> 
 

 
</head> 
 

 
<body> 
 
    <canvas id='c'></canvas> 
 
</body> 
 

 
</html>

私は

出典

2016-04-25 AMir Sirati

がイン使用して画像に影を追加書きますメモリキャンバス。

drawImage画像の代わりにメモリ内のキャンバス。はい、drawImageは他のキャンバスや画像を描くことができます！

[追加：ベースとして質問者のコードを使用したサンプルコード]

var canvas = document.getElementById('c'); 
 
canvas.width = 360; 
 
canvas.height = 360; 
 
var context = canvas.getContext('2d'); 
 
var counter = 0; 
 
TO_RADIANS = Math.PI/180; 
 

 
var nextTime=0; 
 
var delay=1000/60*2; 
 

 
var logoImageh = new Image(); 
 
logoImageh.onload=start; 
 
logoImageh.src = 'http://sirati.info/tmp/h.png'; 
 
var logoImagem = new Image(); 
 
logoImagem.onload=start; 
 
logoImagem.src = 'http://sirati.info/tmp/m.png'; 
 
var imageCount=2; 
 
// 
 
function start(){ 
 
    canvasLogoImageh=addShadowToImage(logoImageh); 
 
    canvasLogoImagem=addShadowToImage(logoImagem); 
 
    requestAnimationFrame(loop); 
 
} 
 

 
function addShadowToImage(img){ 
 
    var c=document.createElement('canvas'); 
 
    var cctx=c.getContext('2d'); 
 
    c.width=img.width; 
 
    c.height=img.height; 
 
    cctx.shadowColor='black'; 
 
    cctx.shadowBlur=10; 
 
    cctx.drawImage(img,0,0); 
 
    return(c); 
 
} 
 

 
function loop(time) { 
 
    if(time<nextTime){requestAnimationFrame(loop);return;} 
 
    nextTime=time+delay; 
 
    context.clearRect(0, 0, canvas.width, canvas.height); 
 
    drawRotatedImage(canvasLogoImageh, 180, 180, counter++); 
 
    drawRotatedImage(canvasLogoImagem, 180, 180, counter++); 
 
    counter += 0.25; 
 
    requestAnimationFrame(loop); 
 
} 
 

 
function drawRotatedImage(image, x, y, angle) { 
 
    context.save(); 
 
    context.translate(x, y); 
 
    context.rotate(angle * TO_RADIANS); 
 
    context.drawImage(image, -(image.width/2), -(image.height/2)); 
 
    context.restore(); 
 
}

body{ background-color: ivory; } 
 
canvas{border:1px solid red; margin:0 auto; }

<canvas id="c" width=300 height=300></canvas>

出典

2016-04-25 19:19:18 markE

私はdrawRotatedImageに入れたときに働いていません。私は回転ループで影を書く必要があります –

影を描くことは高価であり、アニメーションループで影を連続的に描くことは非常に高価です - そうしないでください！答えのテクニックはうまくいくはずです...すべてが同じイメージですが、影が適用されています！ :-) – markE

ああTY、しかし、私は再び働いdraswrotatedimageに影を書いていない： \t \t drawRotatedImage(logoImages,180,190,counter++,6,6,3,red); \t function drawRotatedImage(image, x, y, angle, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor) { \t \t context.save(); \t \t context.translate(x, y); \t \t context.rotate(angle * TO_RADIANS); \t \t context.shadowColor = shadowColor; \t \t context.shadowOffsetX = shadowOffsetX; \t \t context.shadowOffsetY = shadowOffsetY; \t \t context.shadowBlur = shadowBlur; \t \t context.drawImage(image, -(image.width/2), -(image.height/2)); \t \t context.restore(); \t } –

html 5キャンバスで画像を描き、影で回転させる方法

答えて

関連する問題