Note that there are some explanatory texts on larger screens.

plurals
  1. POAnimate a Canvas circle to draw on load
    primarykey
    data
    text
    <p>OK Hello.</p> <p>I've decided to start using HTML canvas for a small project I have.</p> <p>There's no real start yet. I'm just learning the basics of Canvas and I want to Animate a circle </p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;title&lt;/title&gt; &lt;style&gt; body { margin: 0px; padding: 0px; background: #222; } &lt;/style&gt; &lt;link rel="stylesheet" href="style.css" type="text/css"&gt; &lt;/head&gt; &lt;body&gt; &lt;canvas id="myCanvas" width="578" height="250"&gt;&lt;/canvas&gt; &lt;script&gt; var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); var x = canvas.width / 2; var y = canvas.height / 2; var radius = 75; var startAngle = 1.5 * Math.PI; var endAngle = 3.2 * Math.PI; var counterClockwise = false; context.beginPath(); context.arc(x, y, radius, startAngle, endAngle, counterClockwise); context.lineWidth = 15; // line color context.strokeStyle = 'black'; context.stroke(); &lt;/script&gt; &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script src="//ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js" type="text/javascript"&gt;&lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>Here is a fiddle <a href="http://jsfiddle.net/oskar/Aapn8/" rel="noreferrer">http://jsfiddle.net/oskar/Aapn8/</a> of what I'm trying to achieve. I'm not to fussed with the "Bounce" effect.</p> <p>But i basically want it to Draw on page load and stop at the desired Angle of the Arc Here's the Fiddle of what I've created so far.</p> <p><a href="http://jsfiddle.net/skerwin/uhVj6/" rel="noreferrer">http://jsfiddle.net/skerwin/uhVj6/</a></p> <p>Thanks</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload