VirtualMV/Internet and Web(1)/Activity/JavaScript-Canvas

From WikiEducator
Jump to: navigation, search

JavaScript - Canvas

VmvIcon Assessed Activity.png
Assessed Activity 7.2 (2016) JavaScript Canvas [2 marks]
  1. Create a web page in your web site called jsCanvas.html
    • Add HTML code following (put your name in where it says "YourName").
    • Test the code
  2. Modify the JavaScript Code to add more features (you may like to refer to http://www.w3schools.com/html/html5_canvas.asp )
  3. Create a web page in your web site called jsCanvasScrollText.html
    • Add HTML code following (put your name in where it says "YourName").
    • Test the code
  4. Modify the JavaScript Code to add more features (you may like to refer to https://www.udemy.com/blog/html5-canvas-animation/ )

Marking

  • Marks will be awarded based on the completeness of your submission (1 mark for having a working JS programs, 1 mark for the additional functionality)

jsCanvas.html

<!DOCTYPE html>
<html>
<head>
<!--
Demonstration JavaScript file
*By: M Verhaart 2014 (virtualMV)
*Source reference: http://www.w3schools.com/html/html5_canvas.asp
<script src="jsCanvas.js" type="text/javascript"></script>
//-->
</head>
<body>
<div>
  <canvas id="myCanvas" width="500" height="400" style="border:1px solid #000000;">
  Your browser does not support the HTML5 canvas tag.
  </canvas>
</div>
<script type="text/javascript">
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createLinearGradient(0,0,300,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
ctx.fillStyle = grd;
ctx.fillRect(10,10,480,380);
//Draw a line
ctx.moveTo(10,10); ctx.lineTo(480,380); 
ctx.stroke();
//Draw a Circle
ctx.beginPath(); ctx.arc(250,200,100,0,2*Math.PI);
ctx.stroke();
//Add some text
ctx.fillStyle = "#0000FF"; ctx.font = "50px Arial";
ctx.fillText("Hello World",100,200);
ctx.fillText("YourName here",100,250);
</script>
</body>
</html>

jsCanvasScrollText.html

<!DOCTYPE html>
<html>
<head>
<!--
Demonstration JavaScript file
*By: M Verhaart 2014 (virtualMV)
*Source reference: https://www.udemy.com/blog/html5-canvas-animation/
*For an explanation of how it works
<script src="jsCanvasScrollText.js" type="text/javascript"></script>
//-->
    <title>Text Animation</title>
       <style>
        canvas{border: 3px solid #bbb;}
        .subdiv{width: 320px;}
        .text{margin: auto; width: 290px;}
       </style>
	   <script type="text/javascript">
  var idCan, ctx, step, steps = 0, intDelay = 20;
  function fnInit() {
    idCan = document.getElementById("MyCanvas");
    ctx = idCan.getContext("2d");
    ctx.fillStyle = "blue"; ctx.font = "20pt Verdana";
    ctx.textAlign = "center"; ctx.textBaseline = "middle";
    step = 0; steps = idCan.width + 50;
    fnScrollText();
  }
  function fnScrollText() {
    step++;
    //Clear the previous screen
    ctx.clearRect(0, 0, idCan.width, idCan.height);
    ctx.save();
    ctx.translate(step, idCan.height / 2);
    // Write Welcome on the screen at the new position
    ctx.fillText("Hello World YourName here", 0, 0);
    ctx.restore();
    if (step == steps) { step = 0;}
    if (step < steps) {
       var t = setTimeout('fnScrollText()', intDelay);}
  }
  </script>
  </head>
  <body onload="fnInit();">
    <div>
       <canvas id="MyCanvas" width="300" height="200">
       This browser or document mode doesn’t support canvas object
       </canvas>
    </div>
</body>
</html>