Revision 343947 of bTest

  • Revision slug: User:trevorh/bTest
  • Revision title: bTest
  • Revision id: 343947
  • Created:
  • Creator: trevorh
  • Is current revision? No
  • Comment

Revision Content

A demo of the miterLimit property

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
 
  // Clear canvas
  ctx.clearRect(0,0,150,150);
 
  // Draw guides
  ctx.strokeStyle = '#09f';
  ctx.lineWidth   = 2;
  ctx.strokeRect(-5,50,160,50);
 
  // Set line styles
  ctx.strokeStyle = '#000';
  ctx.lineWidth = 10;
 
  // check input
  if (document.getElementById('miterLimit').value.match(/\d+(\.\d+)?/)) {
    ctx.miterLimit = parseFloat(document.getElementById('miterLimit').value);
  } else {
    alert('Value must be a positive number');
  }
 
  // Draw lines
  ctx.beginPath();
  ctx.moveTo(0,100);
  for (i=0;i<24;i++){
    var dy = i%2==0 ? 25 : -25 ;
    ctx.lineTo(Math.pow(i,1.5)*2,75+dy);
  }
  ctx.stroke();
  return false;
}

{{ EmbedLiveSample('A_demo_of_the_miterLimit_property','400','180','/@api/deki/files/91/=Canvas_miterlimit.png') }}

Revision Source

<h3 id="A_demo_of_the_miterLimit_property" name="A_demo_of_the_miterLimit_property">A demo of the <code>miterLimit</code> property</h3>
<pre class="brush: js">
function draw() {
&nbsp; var ctx = document.getElementById('canvas').getContext('2d');
&nbsp;
&nbsp; // Clear canvas
&nbsp; ctx.clearRect(0,0,150,150);
&nbsp;
&nbsp; // Draw guides
&nbsp; ctx.strokeStyle = '#09f';
&nbsp; ctx.lineWidth&nbsp;&nbsp; = 2;
&nbsp; ctx.strokeRect(-5,50,160,50);
&nbsp;
&nbsp; // Set line styles
&nbsp; ctx.strokeStyle = '#000';
&nbsp; ctx.lineWidth = 10;
&nbsp;
&nbsp; // check input
&nbsp; if (document.getElementById('miterLimit').value.match(/\d+(\.\d+)?/)) {
&nbsp;&nbsp;&nbsp; ctx.miterLimit = parseFloat(document.getElementById('miterLimit').value);
&nbsp; } else {
&nbsp;&nbsp;&nbsp; alert('Value must be a positive number');
&nbsp; }
&nbsp;
&nbsp; // Draw lines
&nbsp; ctx.beginPath();
&nbsp; ctx.moveTo(0,100);
&nbsp; for (i=0;i&lt;24;i++){
&nbsp;&nbsp;&nbsp; var dy = i%2==0 ? 25 : -25 ;
&nbsp;&nbsp;&nbsp; ctx.lineTo(Math.pow(i,1.5)*2,75+dy);
&nbsp; }
&nbsp; ctx.stroke();
&nbsp; return false;
}
</pre>
<div class="hidden">
  <pre class="brush: html">
&lt;table&gt;
  &lt;tr&gt;
    &lt;td&gt;&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;&lt;/td&gt;
    &lt;td&gt;Change the miterLimit by entering a new value below and clicking the redraw button.&lt;br&gt;&lt;br&gt;
      &lt;form onsubmit="return draw();"&gt;
        &lt;label&gt;Miter limit&lt;/label&gt;
        &lt;input type="text" size="3" id="miterLimit"/&gt;
        &lt;input type="submit" value="Redraw"/&gt;
      &lt;/form&gt;
    &lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;</pre>
  <pre class="brush: js">
document.getElementById('miterLimit').value = document.getElementById('canvas').getContext('2d').miterLimit;
draw();</pre>
</div>
<p>{{ EmbedLiveSample('A_demo_of_the_miterLimit_property','400','180','/@api/deki/files/91/=Canvas_miterlimit.png') }}</p>
Revert to this revision