Wie kann ich Bild zeichnen und mit Schatten in HTML 5 Leinwand

Ich schreibe eine Leinwand Bild drehen und versuchen, Schlagschatten hinzuzufügen. Jeder kann mir helfen, wie ich einen anderen Schattenstil für Bilder in Canvas hinzufügen kann. Ich brauche für Ergebnis Schatten wie wie dieses Bild fallen: enter image description here Wie kann ich Bild zeichnen und mit Schatten in HTML 5 Leinwand

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

vollständige Code:

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>

i schreiben

Quelle

2016-04-25 AMir Sirati

Schatten hinzufügen, um Ihre Bilder mit in- Speicher-Leinwände.

Dann drawImage diese In-Memory-Leinwände anstelle der Bilder. Ja, drawImage kann andere Leinwände sowie Bilder zeichnen!

[Zusatz: Beispielcode Frage des Code als Grundlage verwenden]

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>

Quelle

2016-04-25 19:19:18 markE

nicht funktioniert, wenn ich in drawRotatedImage setzen. Ich brauche Schatten in Rotate Loop schreiben –

Zeichnen eines Schattens ist teuer und das Zeichnen eines Schattens in einer Animationsschleife ist sehr teuer - tun Sie das nicht! Die Antwort-Technik sollte gut funktionieren ... schließlich ist es das gleiche Bild, aber mit dem Schatten angewendet! :-) – markE

ah ty, aber ich schreibe Schatten in draswrotatedimage und nicht wieder gearbeitet: \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 } –

Wie kann ich Bild zeichnen und mit Schatten in HTML 5 Leinwand

Antwort

Verwandte Themen