CANVAS标签

　　HTML5的canvas标签使用JavaScript在网页上绘制图像。画布是一个矩形区域，可以控制其每一像素，它拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
　　创建画布只需向HTML5页面添加canvas标签，定义画面的id、宽度和高度，方法如下：
<canvas id="myCanvas" width="200" height="100"></canvas>

　　canvas标签本身是没有绘图能力的，所有的绘制工作必须在JavaScript内部完成，如下面的代码：
<script type="text/javascript">
　var c=document.getElementById("myCanvas");
　var cxt=c.getContext("2d");
　cxt.fillStyle="#FF0000";
　cxt.fillRect(0,0,150,75);
</script>
　　JavaScript使用id来寻找canvas元素：
var c=document.getElementById("myCanvas");
　　然后，创建context 对象：
var cxt=c.getContext("2d"); 
　　getContext("2d") 对象是内建的HTML5对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

1. 绘制圆形

<canvas id="mycanvas" width="320" height="240" style="border:1px solid #C3C3C3">您的浏览器不支持canvas标签</canvas>
<script type="text/javascript">
  var c = document.getElementById("mycanvas");
  var cxt = c.getContext("2d");
  cxt.fillStyle = "#FF0000";//填充样式
  cxt.beginPath();//开始路径
  cxt.arc(160,120,120,0,Math.PI*2,true);//绘制圆弧，参数分别为圆心的坐标x、y，半径r、起始角度、结束角度他是否顺时针
  cxt.closePath();//结束路径
  cxt.fill();//填充
</script>

2. 绘制路径

<canvas id="mycanvas" width="320" height="240" style="border:1px solid #C3C3C3">您的浏览器不支持canvas标签</canvas>
<script type="text/javascript">
  var c = document.getElementById("mycanvas");
  var cxt = c.getContext("2d");
  cxt.strokeStyle = "#cc0000";//描边样式
  cxt.moveTo(0,0);//将画笔移至某个点
  cxt.lineTo(160,120);//从当前画笔位置绘制直线到指定坐标点
  cxt.lineTo(0,240);
  cxt.stroke();//描边
</script>

3. 绘制渐变填充的矩形

<canvas id="mycanvas" width="320" height="240" style="border:1px solid #C3C3C3">您的浏览器不支持canvas标签</canvas>
<script type="text/javascript">
  var c = document.getElementById("mycanvas");
  var cxt = c.getContext("2d");
  var grd = cxt.createLinearGradient(0,0,320,240);//定义一个线型渐变
  grd.addColorStop(0,"#FF0000");//添加渐变色，起始点为红色
  grd.addColorStop(.7,"#C3C3C3");//添加渐变色，偏移70%处的颜色为灰色

  grd.addColorStop(1,"#00FF00");//添加渐变色，结束点为绿色
  cxt.fillStyle = grd;//指定填充样式为渐变对象
  cxt.beginPath();
  cxt.fillRect(0,0,320,240);//绘制矩形
  cxt.closePath();
  cxt.fill();
</script>

 

 

转载于:https://www.cnblogs.com/featherfly/p/3508652.html