1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90
| <!DOCTYPE html>
<html>
<head>
</head>
<body>
<canvas id="canvas"></canvas>
<canvas id="canvas_second"></canvas>
<br>Choose your scale : <select onchange="change_scale(this);" autocomplete="off">
<option>0.5</option>
<option selected>1</option>
<option>1.5</option>
<option>2</option>
</select>
<script type="text/javascript">
//The canvas :
c = document.getElementById("canvas");
c.style.border = "solid #000000 1px";
//The second canvas :
c_second = document.getElementById("canvas_second");
c_second.style.border = "solid #000000 1px";
//Define the original width and height canvas :
ORIGINAL_WIDTH_CANVAS = 300;
ORIGINAL_HEIGHT_CANVAS = 300;
c.width = ORIGINAL_WIDTH_CANVAS;
c.height = ORIGINAL_HEIGHT_CANVAS;
c_second.width = ORIGINAL_WIDTH_CANVAS;
c_second.height = ORIGINAL_HEIGHT_CANVAS;
//The canvas context :
ctx = c.getContext("2d");
ctx_second = c_second.getContext("2d");
//Default scaling
scale = 1;
//Drawing function :
function draw()
{
//Clear the drawing :
ctx.clearRect(0, 0, ORIGINAL_WIDTH_CANVAS, ORIGINAL_HEIGHT_CANVAS);
//Drawing a red rectangle :
ctx.fillStyle = "#000000";
ctx.fillRect(5, 5, 50, 50);
//Drawing a text :
ctx.font = "normal bold 20px sans-serif";
ctx.fillText("Hello world", ORIGINAL_WIDTH_CANVAS-220, ORIGINAL_HEIGHT_CANVAS-10);
//Clear the drawing on the second canvas :
ctx_second.clearRect(0, 0, ORIGINAL_WIDTH_CANVAS, ORIGINAL_HEIGHT_CANVAS);
//Copy drawing on the second canvas :
ctx_second.drawImage(c, 0, 0);
}
//Function for scaling the second canvas :
function change_scale(this_select)
{
//Retrieve the scale value :
scale = parseFloat(this_select.value);
//Resize the second canvas :
c_second.width = ORIGINAL_WIDTH_CANVAS * scale;
c_second.height = ORIGINAL_HEIGHT_CANVAS * scale;
//Apply scaling on the second canvas :
ctx_second.scale(scale, scale);
}
//Draw :
setInterval("draw()", 300);
</script>
</body>
</html> |
Partager