Question

作为css / html / js的新手，我遇到了一个问题，我希望通过canvas元素获得有关动画的帮助。使用html和css我已经能够创建一个翻转效果（西班牙语/英语词汇闪卡，一边是英语，另一边是西班牙语），但视觉是一个非常基本的彩色矩形。我更喜欢使用画布来绘制图像（即带衬里的闪卡）。 flashcard是在canvas中创建的，但我仍然坚持如何将动画方法（css过渡和变换属性）应用到canvas元素。下面是使用canvas创建的flashcard的代码。感谢您提供任何可以通过这种方式发送的帮助。

/*FLASHCARD DRAWING*/

<head>
<title>flashcard_1</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
style type="text/css">

#myCanvas {
margin: 20px;
border-radius: 7px;
-webkit-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
float: left;}

</style>
</head>

<body>
<canvas id="myCanvas" width="400" height="230"
style="border: 1px solid black;"
</canvas>

<script>

var canvas = document.getElementById("myCanvas");

var ctx = canvas.getContext("2d");
ctx.fillStyle = "#ffffff";

ctx.moveTo(0,35);
ctx.lineTo(500,35);
ctx.strokeStyle='#3399ff';
ctx.stroke();

ctx.beginPath();
ctx.moveTo(0,60);
ctx.lineTo(500,60);
ctx.lineWidth = .5;
ctx.strokeStyle='#ff3333';
ctx.stroke();

ctx.moveTo(0,85);
ctx.lineTo(500,85);
ctx.stroke();

ctx.moveTo(0,110);
ctx.lineTo(500,110);
ctx.stroke();

ctx.moveTo(0,135);
ctx.lineTo(500,135);
ctx.stroke();

ctx.moveTo(0,160);
ctx.lineTo(500,160);
ctx.stroke();

ctx.moveTo(0,185);
ctx.lineTo(500,185);
ctx.stroke();

ctx.moveTo(0,210);
ctx.lineTo(500,210);
ctx.stroke();

</script>
</body
</html>

如何创建3D动画＆＃34;翻转效果＆＃34;用帆布元素

0 个答案: