html5代码案例
<h1>html5代码案例</h1>
1. 绘制矩形：
<canvas id="canvas" width="500" height="500">
    您的浏览器不支持canvas
</canvas>
<script>
  var canvas = ElementById('canvas');//获取画布
  var context = Context('2d');//获取2d绘图环境
  context.fillStyle="#FF0000";
  context.fillRect(10,10,100,100);//把(10,10)位置大小为100X100的矩形涂
</script>
2. 绘制圆形：
<canvas id="canvas" width="500" height="500">
html矩形框代码怎么写    您的浏览器不支持canvas
</canvas>
<script>
  var canvas = ElementById('canvas');//获取画布
  var context = Context('2d');//获取2d绘图环境
  context.fillStyle="#FF0000";
  context.beginPath();
  context.arc(50,50,50,0,Math.PI*2,true);//把(50,50)位置半径为50的圆涂
  context.closePath();
  context.fill();       
</script>
3.绘制图像：
<canvas id="canvas" width="500" height="500">
    您的浏览器不支持canvas
</canvas>
<script>
  function drawImg(){
      var canvas = ElementById('canvas');//获取画布
      var context = Context('2d');//获取2d绘图环境
      var img=new Image();
      img.src="image.jpg";
      load=function(){
          context.drawImage(img,10,10);//在(10,10)位置绘制图像
      }
  }
</script>
4.绘制文字：
<canvas id="canvas" width="500" height="500">
    您的浏览器不支持canvas
</canvas>
<script>
  var canvas = ElementById('canvas');//获取画布
  var context = Context('2d');//获取2d绘图环境
  context.fillStyle = "#FF0000";
  context.font="20px sans-serif";
  context.fillText("Hello World", 10 , 30);//在(10,30)位置绘制文本 
</script>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。