scrawl-canvas
Version:
Version 8.9.4 - 19 Nov 2022
62 lines (50 loc) • 1.84 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Demo Canvas 045</title>
<link href="css/normalize.css" rel="stylesheet" />
<link href="css/tests.css" rel="stylesheet" />
<style>
canvas {
margin: 0 auto;
}
img {
display: none;
}
</style>
</head>
<body>
<h1><a href="index.html">Scrawl-canvas v8</a> - Canvas test 045</h1>
<h2>Use clipping entitys as pivots; clipping entitys and cascade events</h2>
<h3>Move cursor over image to reveal hidden actions</h3>
<canvas
id="mycanvas"
width="400"
height="767"
data-scrawl-canvas
></canvas>
<p id="reportmessage"></p>
<div class="testinfo">
<h4>Test purpose</h4>
<ul>
<li>Code up a bespoke factory which will:</li>
<ul>
<li>Create a new group.</li>
<li>Add a Wheel entity with a 'clip' method to that group.</li>
<li>Add a Picture entity to the group; the Picture should pivot to the clipper, and add the clipper's rotation to its own.</li>
<li>Create a tween to rotate the clipper</li>
<li>Add 'onEnter' and 'onLeave' functions to the clipper so that when user's mouse enters/leaves the clip region, it rotates</li>
</ul>
<li>Load the painting and generate several spinning areas in it.</li>
<li>Create a block entity to act as the trigger to fade in-and-out a Phrase entity describing the painting.</li>
</ul>
<p><b>Touch test:</b> should work as expected</p>
<p><a href="../docs/demo/canvas-045.html">Annotated code</a></p>
</div>
<script src="canvas-045.js" type="module"></script>
<img id="songbird" class="ohara-koson" src="img/ohara-koson-songbird.jpg" />
</body>
</html>