Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
 
<html>
<head>
    <title>HTML5 Canvas塗鴉板</title>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.js">
    </script>
    <style>
        body,input { font-size: 9pt; }
      
    </style>
    <script>
        $(function () {
          //取得canvas context
          var $canvas = $("#cSketchPad");
          var ctx = $canvas[0].getContext("2d");
          ctx.lineCap = "round";
          ctx.fillStyle = "blue";
          ctx.fillRect(0, 0, $canvas.width(), $canvas.height());
          ctx.beginPath();
          ctx.strokeStyle = "yellow";
          ctx.lineWidth = 5;
          ctx.moveTo(20, 20);
          ctx.lineTo(80, 80);
          ctx.stroke();
        });
    </script>
</head>
<body>
<div id="dCanvas">
<canvas id="cSketchPad" width="100" height="100" style="border: 2px solid gray" />
</div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect width="100" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:gray;stroke-width:3" />
  <line x1="20" y1="20" x2="80" y2="80" style="stroke:rgb(255,255,0);stroke-width:5" />
</svg>  
  
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
darkthreadpro
0viewers