Canvas- Make Beautiful Shapes by Rotation and Transformation
Written by 13 June 2013
HTM5 Canvas has two efficient and simple tools which help to draw more beautiful shapes harder to draw them directly. They are HTML5 Transformation for moving the context axis and HTML5 Rotation for rotating the context. Below we have made a beautiful shape just by rotating and redrawing a simple polygon with four sides (show at the right). Enjoy!
Code Snippet:
<!-- this script is provided by www.html5freecode.com coded by: Kerixa Inc. -->
<!-- This Script is from www.html5freecode.com, Coded by: Kerixa Inc-->
<canvas id="myCanvas" width="350" height="230"></canvas>
<script>
var cnv = document.getElementById('myCanvas')
var ctx = cnv.getContext('2d')
var deg = Math.PI/180
ctx.translate (110, 120)
for (i=0; i<=360; i+=15){
ctx.rotate(i*deg)
ctx.beginPath()
ctx.moveTo(0, 0)
ctx.lineTo(85, 0)
ctx.lineTo(70, 80)
ctx.lineTo(0, 75)
ctx.shadowBlur = 5
ctx.closePath()
ctx.shadowColor= "rgba(220,210,220,.4)"
ctx.shadowOffsetX = ctx.shadowOffsetY = 5
ctx.strokeStyle= "rgba(190,20,210,0.8)"
ctx.lineWidth= 2
ctx.stroke()
}
ctx.translate (-235, -40)
ctx.beginPath()
ctx.moveTo(0, 0)
ctx.lineTo(85, 0)
ctx.lineTo(70, 80)
ctx.lineTo(0, 75)
ctx.shadowBlur = 5
ctx.closePath()
ctx.shadowColor= "rgba(220,210,220,.4)"
ctx.shadowOffsetX = ctx.shadowOffsetY = 5
ctx.strokeStyle= "rgba(100,20,210,0.8)"
ctx.lineWidth= 2
ctx.stroke()
</script>
<div style="text-align: left"><br><font face="Tahoma"><br><a target="_blank" href="http://www.html5freecode.com"><span style="font-size: 8pt; text-decoration: none">HTML5 Free Code</span></a></font></div><a target='_blank' href='www.html5freecode.com' style='font-size: 8pt; text-decoration: none'>Html5 Free Codes</a>
Example:
Let's stay in touch
Get the latest and greatest javascript codes directly to your mail
TRENDING POST
VISITORS
Online Users:
12
Recent Members:
FOTPU
Comments
Here you can leave us commments. Let us know what you think about this code tutorial!