jQuery 1.4 Animation Techniques - Index of
jQuery 1.4 Animation Techniques - Index of jQuery 1.4 Animation Techniques - Index of
[ 273 ] Chapter 10 2. Next we can add the JavaScript that will draw to the . We'll draw a Union Jack flag. Function in the element at the bottom of the template file and add the following code in its place: var canvas = document.getElementById("c"), context = canvas.getContext("2d"); context.fillStyle = "#039"; context.fillRect(50, 50, 400, 200); context.beginPath(); context.strokeStyle = "#fff"; context.lineWidth = 50; context.moveTo(250, 50); context.lineTo(250, 250); context.moveTo(50, 150); context.lineTo(450, 150); context.moveTo(50, 50); context.lineTo(450, 250); context.moveTo(50, 250); context.lineTo(450, 50); context.stroke(); context.closePath(); context.strokeStyle = "#C00"; context.lineWidth = 30; context.beginPath(); context.moveTo(250, 50); context.lineTo(250, 250); context.moveTo(50, 150); context.lineTo(450, 150); context.stroke(); context.closePath(); context.lineWidth = 1; context.fillStyle = "#C00"; context.beginPath(); context.moveTo(50, 50); context.lineTo(195, 125); context.lineTo(165, 125); context.lineTo(50, 66); context.fill(); context.closePath();
Canvas Animations context.beginPath(); context.moveTo(450, 50); context.lineTo(305, 125); context.lineTo(275, 125); context.lineTo(422, 50); context.lineTo(450, 50); context.fill(); context.closePath(); context.beginPath(); context.moveTo(450, 250); context.lineTo(310, 175); context.lineTo(335, 175); context.lineTo(450, 235); context.lineTo(450, 250); context.fill(); context.closePath(); context.beginPath(); context.moveTo(50, 250); context.lineTo(200, 175); context.lineTo(225, 175); context.lineTo(80, 250); context.lineTo(50, 250); context.fill(); context.closePath(); 3. Save the file as canvas.html. 4. If we run the page now in any browser except IE, we should see something like the following: [ 274 ]
- Page 244 and 245: [ 223 ] Chapter 8 1. jQuery provide
- Page 246 and 247: clear:both; } div#fadeLeft, div#fad
- Page 248 and 249: Time for action - animating the pos
- Page 250: 2. In this example we used the dele
- Page 253 and 254: CSS3 Animations The following trans
- Page 255 and 256: CSS3 Animations Units It is of crit
- Page 257 and 258: CSS3 Animations Skew Remember the t
- Page 259 and 260: CSS3 Animations Calculating the sin
- Page 261 and 262: CSS3 Animations The filter property
- Page 263 and 264: CSS3 Animations If, like me, you th
- Page 265 and 266: CSS3 Animations } el.filters.item("
- Page 267 and 268: CSS3 Animations An unfortunate prob
- Page 269 and 270: CSS3 Animations The context of this
- Page 271 and 272: CSS3 Animations Time for action - i
- Page 273 and 274: CSS3 Animations The first variable
- Page 275 and 276: CSS3 Animations Time for action - a
- Page 277 and 278: Download from Wow! eBook CSS3 Anim
- Page 279 and 280: CSS3 Animations We also have to upd
- Page 281 and 282: CSS3 Animations flatMatrix[3] = fla
- Page 283 and 284: CSS3 Animations When updating the s
- Page 285 and 286: CSS3 Animations translate translate
- Page 287 and 288: Canvas Animations Subjects that we'
- Page 289 and 290: Canvas Animations We can set the co
- Page 291 and 292: Download from Wow! eBook Canvas An
- Page 293: Canvas Animations All imageData obj
- Page 297 and 298: Canvas Animations For the next part
- Page 299 and 300: Canvas Animations Time for action -
- Page 301 and 302: Canvas Animations 3. Save the new p
- Page 303 and 304: Canvas Animations Time for action -
- Page 305 and 306: Canvas Animations Once the rectangl
- Page 307 and 308: Canvas Animations We then define tw
- Page 309 and 310: Canvas Animations }, context.lineTo
- Page 311 and 312: Canvas Animations Creating a canvas
- Page 313 and 314: Canvas Animations Time for action -
- Page 315 and 316: Canvas Animations What just happene
- Page 317 and 318: Canvas Animations What just happene
- Page 319 and 320: Canvas Animations aliens.splice(x,
- Page 321 and 322: Canvas Animations Pop quiz - creati
- Page 323 and 324: Download from Wow! eBook
- Page 325 and 326: Pop Quiz Answers Using fadeToggle()
- Page 327 and 328: Pop Quiz Answers Using slideToggle
- Page 329 and 330: Pop Quiz Answers Implementing the p
- Page 331 and 332: Pop Quiz Answers Animating the canv
- Page 333 and 334: show() or hide() method, triggering
- Page 335 and 336: cssHooks using 239 cssHooks feature
- Page 337 and 338: fading animations 20 flicker effect
- Page 339 and 340: proximity animations about 207 exte
- Page 341 and 342: scaleY 232 skew 232 skewX 232 skewY
- Page 343 and 344: jQuery 1.4 Reference Guide ISBN: 97
Canvas <strong>Animation</strong>s<br />
context.beginPath();<br />
context.moveTo(450, 50);<br />
context.lineTo(305, 125);<br />
context.lineTo(275, 125);<br />
context.lineTo(422, 50);<br />
context.lineTo(450, 50);<br />
context.fill();<br />
context.closePath();<br />
context.beginPath();<br />
context.moveTo(450, 250);<br />
context.lineTo(310, 175);<br />
context.lineTo(335, 175);<br />
context.lineTo(450, 235);<br />
context.lineTo(450, 250);<br />
context.fill();<br />
context.closePath();<br />
context.beginPath();<br />
context.moveTo(50, 250);<br />
context.lineTo(200, 175);<br />
context.lineTo(225, 175);<br />
context.lineTo(80, 250);<br />
context.lineTo(50, 250);<br />
context.fill();<br />
context.closePath();<br />
3. Save the file as canvas.html.<br />
4. If we run the page now in any browser except IE, we should see something like<br />
the following:<br />
[ 274 ]
Change language