Introduction
Canvas is a new element in HTML5 used to draw graphics, on the fly, on a web page. This post shows some basic functions of canvas including draw line, draw rect, draw circle, bezier curve, quadratic curve, image and text.
The Program:
<html>
<head>
<style>
#testCanvas {
position: absolute;
left: 0px;
top: 0px;
z-index: 2;
}
#tmpCanvas {
position: absolute;
left: 0px;
top: 0px;
z-index: 1;
}
#controls {
position: absolute;
left: 600px;
top: 0px;
width: 200px;
height: 800px;
}
</style>
<script type="text/javascript">
function drawLine () {
var ctx = getCanvas('testCanvas').getContext('2d'); // get Canvas context
ctx.strokeStyle = '#AAAAAA'; // line color
ctx.lineWidth = 3; // line width
ctx.beginPath(); // start
ctx.moveTo(3, 3); // start point
ctx.lineTo(40, 20); // end point
ctx.stroke(); // draw line
}
function drawRect () {
var ctx = getCanvas('testCanvas').getContext('2d'); // get Canvas context
ctx.fillStyle = 'rgba(54, 76, 175, 0.6)'; // fill style
ctx.strokeStyle = '#AAAAAA'; // line color
ctx.lineWidth = 3; // line width
ctx.fillRect(30, 30, 80, 80); // start x, start y, width, height
ctx.strokeRect(30, 30, 80, 80);
}
function drawCircle () {
var ctx = getCanvas('testCanvas').getContext('2d'); // get Canvas context
ctx.fillStyle = 'rgba(254, 76, 175, 0.6)'; // fill style
ctx.strokeStyle = '#AAAAAA'; // line color
ctx.beginPath();
ctx.arc(300, 300, 100, // center x, center y, radius
0 * Math.PI, 2 * Math.PI, // start, finish, change the two values to draw a part of circle
false); // drawing direction, true: anticlockwise, false: clockwise
ctx.fill();
ctx.lineWidth = 5;
ctx.strokeStyle = "black";
ctx.stroke();
}
function drawBezierCircle () {
var ctx = getCanvas('testCanvas').getContext('2d'); // get Canvas context
ctx.fillStyle = 'rgba(254, 76, 175, 0.6)'; // fill style
ctx.strokeStyle = '#AAAAAA'; // line color
ctx.lineWidth = 3; // line width
ctx.beginPath();
ctx.moveTo(50, 50); // start x, start y
ctx.bezierCurveTo(95, 80, 95, 110, 50, 140); // cp1 x, cp1 y, cp2 x, cp2 y, end x, end y
// where cp denotes control point
ctx.bezierCurveTo(5, 110, 5, 80, 50, 50);
ctx.fill();
ctx.stroke();
}
function drawQuadraticCircle () {
var ctx = getCanvas('testCanvas').getContext('2d'); // get Canvas context
ctx.fillStyle = 'rgba(54, 236, 175, 0.3)'; // fill style
ctx.strokeStyle = '#AAAAAA'; // line color
ctx.lineWidth = 3; // line width
ctx.beginPath();
ctx.moveTo(120, 120); // start x, start y
ctx.quadraticCurveTo(145, 125, 150, 150); // cp x, cp y, end x, end y
ctx.quadraticCurveTo(145, 175, 120, 180);
ctx.quadraticCurveTo(95, 175, 90, 150);
ctx.quadraticCurveTo(95, 125, 120, 120);
ctx.fill();
ctx.stroke();
}
function loadImage() {
var ctx = getCanvas('testCanvas').getContext('2d'); // get Canvas context
var img = new Image();
img.src = 'imgs/test.png';
img.onload = function(){
ctx.drawImage(img, 200, 200, 300, 200); // x, y, width, height
}
}
function loadCropedImage () {
var ctx = getCanvas('testCanvas').getContext('2d'); // get Canvas context
var img = new Image();
img.src = 'imgs/test.png';
img.onload = function(){
ctx.drawImage(img, 90, 0, 500, 550, // crop area: start x, start y, width, height
200, 200, 300, 200); // display area: x, y, width, height
}
}
function showText () {
var ctx = getCanvas('testCanvas').getContext('2d'); // get Canvas context
ctx.font = '60pt Calibri'; // font, size and family
ctx.fillStyle = 'rgba(254, 76, 175, 0.6)'; // fill style
ctx.strokeStyle = 'blue'; // line color
ctx.lineWidth = 3; // stroke size
ctx.fillText("test text", 100, 400); // fill the text: text, x, y
ctx.strokeText("test text", 100, 400); // stroke the text: text, x, y
}
function getCanvas (id) {
var canvas = document.getElementById(id);
if (canvas && canvas.getContext)
return canvas;
return null;
}
</script>
</head>
<body>
<canvas id="testCanvas" height="500px" width="500px" style="border: 1px solid #3648AE;">
current browser does not support canvas
</canvas>
<div id="controls">
<button onclick="drawLine();">draw line</button>
<button onclick="drawRect();">draw rect</button>
<button onclick="drawCircle();">draw circle</button>
<button onclick="drawBezierCircle();">draw bezier circle</button>
<button onclick="drawQuadraticCircle();">draw quadratic circle</button>
<button onclick="loadImage();">load image</button>
<button onclick="loadCropedImage();">load a part of image</button>
<button onclick="showText();">show text "test text"</button>
</div>
</body>
</html>Download:
https://github.com/benbai123/HTML_CSS_Javascript_practice/blob/master/Html5/Canvas/basic_canvas_test.html
References:
http://www.tutorialspoint.com/html5/html5_canvas.htm
http://www.html5canvastutorials.com/tutorials/html5-canvas-image-crop/
No comments:
Post a Comment