Html Codes: Canvas- Make Beautiful Shapes by Rotation and Transformation

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!

<!-- 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>

If you don't know how to use this code or need more information Click here!


	You can leave comments once you sign in/up.

HTML5 Best Codes

Html Codes: Canvas- Make Beautiful Shapes by Rotation and Transformation

You can leave comments once you sign in/up.

Review

Links