[Bug 16162] New: <!-- saved from url=(0186)https://s3.amazonaws.com/content.sunnyvale.itu.edu/assets/51484/original/lec3-demo1.html?AWSAccessKeyId=AKIAIMQP2H67TNL3T5XA&Expires=1330581576&Signature=9TNu5hYenC2beOzU3Gnau4%2FmGnk%3D --> <html><head><meta http-equiv="Content-

https://www.w3.org/Bugs/Public/show_bug.cgi?id=16162

           Summary: <!-- saved from
                    url=(0186)https://s3.amazonaws.com/content.sunnyvale.i
                    tu.edu/assets/51484/original/lec3-demo1.html?AWSAccess
                    KeyId=AKIAIMQP2H67TNL3T5XA&Expires=1330581576&Signatur
                    e=9TNu5hYenC2beOzU3Gnau4%2FmGnk%3D -->
                    <html><head><meta http-equiv="Content-
           Product: HTML WG
           Version: unspecified
          Platform: Other
               URL: http://www.whatwg.org/specs/web-apps/current-work/#top
        OS/Version: other
            Status: NEW
          Severity: normal
          Priority: P3
         Component: HTML Canvas 2D Context (editor: Ian Hickson)
        AssignedTo: ian@hixie.ch
        ReportedBy: contributor@whatwg.org
         QAContact: public-html-bugzilla@w3.org
                CC: mike@w3.org, public-html-wg-issue-tracking@w3.org,
                    public-html@w3.org


Specification: http://dev.w3.org/html5/2dcontext/
Multipage: http://www.whatwg.org/C#top
Complete: http://www.whatwg.org/c#top

Comment:

<!-- saved from
url=(0186)https://s3.amazonaws.com/content.sunnyvale.itu.edu/assets/51484/orig
inal/lec3-demo1.html?AWSAccessKeyId=AKIAIMQP2H67TNL3T5XA&Expires=1330581576&Si
gnature=9TNu5hYenC2beOzU3Gnau4%2FmGnk%3D -->
<html><head><meta http-equiv="Content-Type" content="text/html;
charset=ISO-8859-1">
<style>
div
{ position: relative;
  left: 190px;
}
</style>
<script>
  var CWID = 400;
  var CHEI = 400;
  var cleft = 50;
  var ctop = 50;

  var vlist = 
  [{x: 15, y: 15},
   {x: 45, y: 15},
   {x: 45, y:-15},
   {x: 15, y:-15},
   {x: 15, y:-45},
   {x:-15, y:-45},
   {x:-15, y:-15},
   {x:-45, y:-15},
   {x:-45, y: 15},
   {x:-15, y: 15},
   {x:-15, y: 45},
   {x: 15, y: 45}
  ];

  var angle = 0;        // starting rotation angle
  var trans = {x:CWID/2, y:CHEI/2};   // starting position

  var canvas = document.createElement('canvas');
  canvas.width = CWID;
  canvas.height = CHEI;
  canvas.style.backgroundColor = '#eeeeee';
  canvas.style.position = 'absolute';
  canvas.style.left = cleft+'px';
  canvas.style.top = ctop+'px';
  var con = canvas.getContext('2d');
  con.translate(trans.x, trans.y);
  drawPath(vlist);

  function translate(e)
  { trans.x = e.pageX-cleft;
    trans.y = e.pageY-ctop;
    drawPath(vlist);
  }
  function rotate()
  { angle += 0.1;
    drawPath(vlist);
  }
  function drawPath(v)
  { con.setTransform(1,0,0,1,0,0);     // set to identity
    con.clearRect(0,0,CWID,CHEI);     // clear canvas

    con.translate(trans.x,trans.y);
    con.rotate(angle);
    con.beginPath()             // draw the shape
    con.moveTo(v[0].x,v[0].y);
    for (var i=1; i<v.length; i++)
      con.lineTo(v[i].x,v[i].y);
    con.closePath();
    con.stroke();
  }
div.addEventListener('Right Rotation',tran,false);
  function tran(e)
  { con.save();
    con.setTransform(1,0,0,1,0,0);
    con.clearRect(0,0,400,400);
    con.restore();
    con.translate(150,220);
    con.rotate(0.1);
    con.translate(-150,-220);
    con.beginPath(); con.moveTo(100,100);
    con.rect(100,200,100,40);
    con.stroke();
  }
div.addEventListener('Left Rotaion',tran,false);
  function tran(e)
  { con.save();
    con.setTransform(1,0,0,1,0,0);
    con.clearRect(0,0,400,400);
    con.restore();
    con.translate(150,220);
    con.rotate(0.1);
    con.translate(-150,-220);
    con.beginPath(); con.moveTo(100,100);
    con.rect(100,200,100,40);
    con.stroke();
  }
var x = 0;
  canvas.addEventListener('Big',func1,false);
  function func1()
  { x += 10;
    con.clearRect(0,0,300,300);
    con.beginPath();
    con.arc(150,150,10+x, 0,2*Math.PI);
    con.stroke();
  }
var x = 0;
  canvas.addEventListener('Small',func1,false);
  function func1()
  { x += 10;
    con.clearRect(0,0,300,300);
    con.beginPath();
    con.arc(150,150,10-x, 0,2*Math.PI);
    con.stroke();
  }


</script>
</head>

<body id="body"><meta name="VeeHD" content="plugin for corp">
<div id="button">rotate</div>
<script>  
  document.getElementById('body').appendChild(canvas);
  canvas.addEventListener('mousedown',translate,false);
  document.getElementById('button')
   .addEventListener('mousedown',rotate,false);
</script><canvas width="400" height="400" style="background-color: rgb(238,
238, 238); position: absolute; left: 50px; top: 50px; "></canvas>

</body></html>

Posted from: 2602:306:ccb3:5d80:c5a0:d08e:7bb2:39ff
User agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/535.11 (KHTML, like
Gecko) Chrome/17.0.963.56 Safari/535.11

-- 
Configure bugmail: https://www.w3.org/Bugs/Public/userprefs.cgi?tab=email
------- You are receiving this mail because: -------
You are the QA contact for the bug.

Received on Wednesday, 29 February 2012 18:00:47 UTC