HTML5 Canvas 实例

  moveTo(x,y) 定义线条开始坐标
 
  lineTo(x,y) 定义线条结束坐标
 
  使用 stroke() 方法来绘制线条
 
  使用 beginPath() 方法来清除当前画布中存在的路径 并且 准备开始绘制新的路径
 
  调用 arc() 方法,传入相应的参数
 
  使用 stroke() 方法来绘制线条
 
  <canvas id=”myCanvas” width=”200″ height=”100″ style=”border:1px solid #0D5BB3;”>
 
  您的浏览器不支持HTML5 Canvas标签
 
  </canvas>
 
  <script type=”text/javascript”>
 
  var c=document.getElementById(”myCanvas”);
 
  var cxt=c.getContext(”2d”);
 
  cxt.fillStyle=”#FF0000″;
 
  cxt.beginPath();
 
  cxt.arc(80,28,25,0,Math.PI*2,true);
 
  cxt.closePath();
 
  cxt.fill();
 
  </script>
 
  执行一下
 
  createLinearGradient(x,y,x1,y1) – 创建线条渐变
 
  createRadialGradient(x,y,r,x1,y1,r1) – 创建一个径向/圆渐变
 
  创建渐变对象(线性还是径向)
 
  使用两种或两种以上的停止颜色来实现颜色渐变效果:addColorStop()方法指定颜色停止,参数使用坐标来描述,可以是0至1
 
  应用渐变到画布元素中,设置画布上下文对象的 fillStyle或strokeStyle的值为 渐变,然后绘制形状,如矩形,文本,或一条线
 
  <canvas id=”myCanvas” width=”200″ height=”100″ style=”border:1px solid #0D5BB3;”>
 
  您的浏览器不支持HTML5 Canvas标签
 
  </canvas>
 
  <script type=”text/javascript”>
 
  var c=document.getElementById(”myCanvas”);
 
  var ctx=c.getContext(”2d”);
 
  // 创建渐变
 
  var grd=ctx.createLinearGradient(0,0,200,0); //线性
 
  //var grd=ctx.createRadialGradient(75,50,5,90,60,100); //径向
 
  grd.addColorStop(0,”blue”);
 
  grd.addColorStop(1,”white”);
 
  // 填充渐变
 
  ctx.fillStyle=grd;
 
  ctx.fillRect(10,10,150,80);
 
  </script>
 
  执行一下
 
  获取或者创建 图像的dom对象
 
  使用 drawImage 方法实现图像的绘制
 
  <canvas id=”myCanvas” width=”200″ height=”180″ style=”border:1px solid #0D5BB3;”>
 
  您的浏览器不支持HTML5 Canvas标签
 
  </canvas>
 
  <img id=”img” src=”/static/resource/img/logo.png” style=”display: none;” />
 
  <script type=”text/javascript”>
 
  var c=document.getElementById(”myCanvas”);
 
  var ctx=c.getContext(”2d”);
 
  //创建图像的dom对象,第一种方法
 
  var img=new Image();
 
  img.src=”/static/resource/img/logo.png”;
 
  //创建图片的dom对象,第二种方法
 
  //var img=document.getElementById(”img”);
 
  ctx.drawImage(img,0,0);
 
  </script>
 
  执行一下
 
  使用 font  属性来定义字体
 
  使用 fillText(text,x,y) 在 canvas 上绘制实心的文本
 
  使用 strokeText(text,x,y) 在 canvas 上绘制空心的文本
 
  <canvas id=”myCanvas” width=”200″ height=”180″ style=”border:1px solid #0D5BB3;”>
 
  您的浏览器不支持HTML5 Canvas标签
 
  </canvas>
 
  <script type=”text/javascript”>
 
  var c=document.getElementById(”myCanvas”);
 
  var ctx=c.getContext(”2d”);
 
  ctx.font=”30px 微软雅黑”;
 
  ctx.fillText(”Hello World”,10,50); //绘制实心文字
 
  //ctx.strokeText(”Hello World”,10,50); //绘制空心文字
 
  </script>
 
  执行一下

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h61746.shtml

张贴在2