Question

我写了一个画布旋转图像并尝试添加阴影。任何人都可以帮助我如何为画布内的图像添加不同的阴影样式。我需要像这个图像一样投下阴影： enter image description here

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>

我写

Answer 1

使用内存画布为图像添加阴影。

然后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>

我如何在html 5画布中绘制图像并旋转阴影

1 个答案: