HTML5 Canvas笔记

  <canvas width="200px" height="200px" id="mycanvas"  style=" border:red 1px solid;"></canvas>
     <script type="text/javascript">
         var c = document.getElementById("mycanvas");
         var cxt = c.getContext("2d");
          //矩形
          cxt.fillStyle = "#ff0000";
          cxt.fillRect(0, 0, 150, 50);
         //划线
         cxt.moveTo(0, 0);
         cxt.lineTo(150, 50);
         cxt.lineTo(0, 50);
         cxt.stroke();
         //画圆
         cxt.fillStyle = "#ff0011";
         cxt.beginPath();
         cxt.arc(70, 18, 15,0, Math.PI * 2, true);
         cxt.closePath();
         cxt.fill();
         //渐变
         var grd = cxt.createLinearGradient(0, 0, 175, 50);
         grd.addColorStop(0, "#FF0000");
         grd.addColorStop(1, "#00ff00");
         cxt.fillStyle = grd;
         cxt.fillRect(0, 100, 175, 50);
         //加载图片
         var img = new Image();
         img.src = "Content/img/1.jpg";
         // cxt.drawImage(img, 0, 0);//无法加载图片
          img.onload = function () {
             cxt.drawImage(img, 0, 0);
          }

</script>