html5 тень трансформации холста

Можно ли применить преобразование к тени? Например, в тень прямоугольника была ромбовидная.html5 тень трансформации холста

<div><canvas id="myCanvas" width="900" height = "700" style="border:solid 1px #000000;"></canvas></div> 

<script> 
    var context = document.getElementById("myCanvas").getContext("2d"); 

    function draw_rectangle() { 
     context.shadowOffsetX = 50; 
     context.shadowOffsetY = 50; 
     context.shadowBlur = 5; 
     context.shadowColor = "DarkGoldenRod"; 
     context.strokeStyle = "Gold"; 
     context.strokeRect(200, 200, 100, 120); 
    } 
    window.onload = draw_rectangle(); 
</script>

источник

2013-02-25 Yorik Ziru

Почему бы вам не использовать css3 для этого? Здесь вы можете найти, как это сделать: http://www.w3schools.com/cssref/css3_pr_box-shadow.asp

источник

2013-02-25 20:03:46 user2108702

Я знаю о возможностях CSS для этого. Необходимо преобразовать тень с помощью canvas API без CSS. –

Нет, вы не можете трансформировать тень отдельно от прямоугольника.

Вы можете вращать как прямоугольник + тень, как это: http://jsfiddle.net/m1erickson/W4fgp/

Вы также можете нарисовать 2 объекта отдельно, 1 прямоугольник и 1 прямоугольник для «тени».

Вот код вращающийся прямоугольник + тень:

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> 
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 

<style> 
    body{ background-color: ivory; } 
    canvas{border:1px solid red;} 
</style> 

<script> 
    $(function(){ 

     var canvas=document.getElementById("canvas"); 
     var ctx=canvas.getContext("2d"); 

     ctx.rotate(.6); 
     ctx.rect(150, 50, 50, 60); 
     ctx.shadowOffsetX = 50; 
     ctx.shadowOffsetY = 50; 
     ctx.shadowBlur = 5; 
     ctx.shadowColor = "DarkGoldenRod"; 
     ctx.strokeStyle = "Gold"; 
     ctx.stroke(); 

    }); // end $(function(){}); 
</script> 

</head> 

<body> 
    <canvas id="canvas" width=300 height=300></canvas> 
</body> 
</html>

источник

2013-02-25 20:22:45 markE

Спасибо за ваш ответ. Мне нужна «падающая» тень, которая не повторяет форму ее источника, например, прямоугольник -> алмаз, круг -> эллипс и т. Д. Рисование двух отдельных объектов сделает трюк, но это не то, что мне нужно в точности. –

Чтобы показать второй «теневой объект» «падение», вы должны проверить трансформацию Skew. Эта статья предназначена для фотошопа, но подходит для вашей ситуации, потому что информация действительно об искажении копии изображения для создания эффекта перспективы тени ... http: //www.adobetutorialz.com/articles/218/1/Perspective-Shadow – markE

html5 тень трансформации холста

ответ

Смежные вопросы