html5新特性之画布

1、canvas的理解

  canvas是一个矩形区域,在这个区域内,通过js可以对区域内的每一帧像素控制

2、js操作canvas对象

  canvas对象.getContext("2d");//获取画布内容

  //设置渐变

  var grd=cxt.createLinearGradient(0,0,175,50);

  grd.addColorStop(0,"#FF0000")

  grd.addColorStop(1,"#00FF00");

  ctx.fillStyle       //设置填充色

    ctx.fillRect                //设置填充位置和大小

  ctx.lineWidth="5";    //绘制宽度

  cxt.strokeStyle="red";  //绘制颜色

  cxt.beginPath();        //开始绘制

  //线条绘制

  cxt.moveTo(10,10);  //从哪里开始

  cxt.lineTo(150,50);  //到哪里

  cxt.stroke();      //绘制方式

  //图片绘制

  var img=new Image()

  img.src="flower.png"

  cxt.drawImage(img,0,0);

  //圆形绘制

  cxt.arc(70,18,15,0,Math.PI*2,true);

  cxt.closePath();     //绘制结束

  

  

上一篇:下拉框、下拉控件之Select2


下一篇:Windows 64位下安装Redis详细教程