HTML5 Canvas

HTML Canvas

创建一个画布

<canvas id="mycanvas" width="200" height="200" style="border:1px solid #000000">
</canvas>

• 用于图形的绘制，通过javascript完成
• 画布是一个矩形框，默认情况下没有边框和内容
• 只是一个图形容器，没有任何样式
• 样式需要通过脚本来绘制

使用JavaScript绘制图像

<script>

找到canvas元素：
var c=document.getElementById("mycanvas");

创建context对象：
var ctx=c.getContext("2d");

绘制出一个红色的矩形：
ctx.fillStyle="#FF0000";

定义矩形的填充方式（x,y,width,height）：
ctx.fillRect(0,0,150,75);

</script>

Convas坐标

• canvas是一个二维网络
• ctx.fillRect(0,0,150,75)意思是：在画布上绘制一个150*75的矩形，从画布的左上角（0，0）开始。

Convas路径

• 画线，两种办法
  • moveTo(x,y)：定义线条开始坐标
  • lineTo(x,y)：定义线条结束坐标

<script>
var c=document.getElementById("mycanvas");
var ctx=c.getContext("2d");

# moveTo：定义开始坐标 lineTo：定义结束坐标 然后使用stroke()方法绘制线条
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
</script>

• 画圆

<script>
var c=document.getElementById("mycanvas");
var ctx=c.getContext("2d");

# ctx.arc(x,y,r,start,stop);
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
</script>

Canvas文本

<script>
var c=document.getElementById("mycanvas");
var ctx=c.getContext("2d");

# 在画布上用Arial字体画一个高为30px的文字
ctx.font="30px Arial";
ctx.fillText("hello world",10,50)
</script>

• 其中，ctx.fillText为实心字体，strokeText为空心字体。

Canvas渐变

• 可以给各种图形填色，定义不同的颜色
• 有两种方式设置Canvas渐变

  createLinearGradient(x,y,x1,y1) 创建线条渐变
  createRadialGradient(x,y,r,x1,y1,r1) 创建一个圆渐变
  

• 当使用渐变对象时，必须使用两种或以上颜色
• 使用createLinearGradient()创建渐变对象

  <script>
  var c=document.getElementById("mycanvas");var ctx=c.getContext("2d");
  
  # 创建渐变
  var grd=ctx.createLinearGradient(0,0,200,0);
  grd.addColorStop(0,"red")
  grd.addColorStop(1,"white")
  
  # 填充渐变
  ctx.fillStyle=grd:
  ctx.fillRect(10,10,150,80);
  
  </script>
  

• 使用createRadialGradient()创建渐变对象

  <script>
  var c=document.getElementById("mycanvas");
  var ctx=c.getContext("2d");
  
  # 创建渐变
  var grd=ctx.createRadialGradient(0,0,200,0);
  grd.addColorStop(0,"red");
  grd.addColorStop(1,"white");
  
  # 填充渐变
  ctx.fillStyle=grd;
  ctx.fillRect(10,10,150,80);
  

Canvas图像

• 将图像放置在画布上
• <script>前需要使用<img>声明图片的的引用

  <script>
  var c=document.getElementById("mycanvas");
  var ctx=c.getContext("2d");
  var img=document.getElementById("图像id号");
  
  # 将图片放置在画布上
  ctx.drawImage(img,10,10);
  </script>