Canvas - HTML 5
11
What is Canvas?
-
Upload
jaeni-sahuri -
Category
Technology
-
view
584 -
download
5
description
Canvas - HTML 5
Transcript of Canvas - HTML 5
What is Canvas?
The HTML5 <canvas> element isused to draw graphics, on the fly,via scripting (usually JavaScript).
Browser Support
• Internet Explorer 9+, Firefox, Opera,Chrome, and Safari
HTML5 Canvas Template
<body><canvas id="myCanvas" width="500"
height="250"></canvas><script>
var canvas = document.getElementById('myCanvas');var context = canvas.getContext('2d');
// do stuff here</script>
</body>
• To draw a line using HTML5 Canvas, wecan use the beginPath(), moveTo(),lineTo(), and stroke() methods.
HTML5 Canvas Line WidthTutorial
• To define the width of an HTML5 Canvasline, we can use the lineWidth property ofthe canvas context. The lineWidthproperty must be set before callingstroke().
context.beginPath();context.moveTo(100, 150);context.lineTo(450, 50);context.lineWidth = 15;context.stroke();
HTML5 Canvas Line Color
// set line colorcontext.strokeStyle = '#ff0000';context.stroke();
Thanks
http://www.gratisan.com
http://jogjawebcenter.com
