js canvas绘图

  • A+
所属分类:JS、JQuery 编程技术

一、Canvas是什么?
Canvas就是一个画布,可以进行画任何的线、图形、填充等一系列的操作,而且操作的画图的就是js,所以让js编程到了嗑药的地步。另外Canvas不仅仅提供简单的二维矢量绘图,也提供了三维的绘图,以及图片处理等一系列的api支持。

(1) 要使用Canvas来绘制图形必须在页面中添加Canvas的标签。

例如: <canvas id="demoCanvas" width="500" height="500"></canvas>

(2) 当然只有上面的标签,只能是创建好了一个画布,其中width和height属性就是设置画布的大小。Id属性也是必须的,后面要用Id来拿到当前的Canvas的Dom对象。通过此Canvas的Dom对象就可以获取他的上下文了,Canvas绘制图形都是靠着Canvas对象的上下文对象。

二、Canvas重要的Context对象

代码:

1
2
3
4
5
6
7
//第一步:获取canvas元素
var canvasDom = document.getElementById("demoCanvas");
//第二步:获取上下文
if(canvasDom .getContext){      //判断浏览器是否支持canvas
    //context是画布,getContext获取绘图上下文对象,也有名为WebGL的3d上下文
    var context = canvasDom .getContext("2d");    
    }

(3) Context上下文默认两种绘制方式:第一种:绘制线(stroke),第二种:填充:fill。

注意:决定了使用哪种方式之后,在填充或者绘制线之前先设置样式。

绘制矩形

1
2
3
4
5
6
7
8
context.fillStyle = "#0000ff";   //填充颜色
context.fillRect(10,10,70,70);   //填充矩形,xy宽高(像素)
context.lineWidth = 20;          //边框宽度
context.lineCap = "round";       //线条末端形状,butt平头,round圆头,square方头,
context.lineJoin = "round";      //线条交叉方式,round圆交,bevel斜交,miter斜接
context.strokeStyle = "red";     //描边颜色
context.strokeRect(50,50,50,50); //描边矩形
context.clearRect(50,50,20,20);  //清除一块矩形区域

绘制路径

1
2
3
4
5
6
7
8
9
context.beginPath();                      //创建路径
context.arc(200,100,20,0,2*Math.PI,false);//绘制圆参数:圆心坐标,半径,起始角度,是否顺时针。 
//arcTo绘制圆弧
context.moveTo(200,100);                  //移动绘图游标
context.lineTo(200,15);                   //绘制直线,从游标位置惠子直线到参数,
//bezierCurveTo绘制曲线,quadraticCurveTo绘制二次曲线,reac绘制矩形,
context.fillStyle = "rgba(0,0,0,1)"
context.stroke();                         //用strokeStyle描边
context.fill();                           //用fillStyle填充

绘制文本

1
2
3
4
5
6
7
8
9
context.font = "bold 14px Arial";   //设置文本样式,大小,字体
context.textAlign="center";         //文本对齐方式,start、end
context.textBaseline = "middle";    //上下对齐方式,top、middle、bottom
context.fillText("文本",200,15);     //fillText使用fillStyle,strokeText使用strokeStyle
context.globalAlpha =0.5;           //设置全局透明度
//context.save();                   //保存当前状态
context.translate(10,10);           //坐标平移,
//transform矩阵变换,setTransform先恢复默认再矩阵变换
context.rotate(1);                  //旋转角度,scale缩放比例,

渐变

createLinearGradient线性渐变、createRadialGradient辐射渐变

渐变线

1
2
3
4
5
6
7
8
context.moveTo(0,0);
context.lineTo(400,300);
var gnt1 = context.createLinearGradient(0,0,400,300);//线性渐变的起止坐标
gnt1.addColorStop(0,'red');               //创建渐变的开始颜色,0表示偏移量
gnt1.addColorStop(1,'yellow');            //创建渐变的结束颜色,1表示偏移量,一个渐变中可以写任意个渐变颜色
context.lineWidth=3;
context.strokeStyle = gnt1;
context.stroke();

渐变矩形

1
2
3
4
5
6
 var gnt1 = context.createLinearGradient(10,0,390,0);
 gnt1.addColorStop(0,'red');    //开始处颜色
 gnt1.addColorStop(0.5,'green');//中间处颜色
 gnt1.addColorStop(1,'blue');   //结尾处颜色
 context.fillStyle = gnt1;
 context.fillRect(10,10,380,280);

渐变圆

1
2
3
4
5
var gnt = context.createRadialGradient(200,300,50,200,200,200);
gnt.addColorStop(1,'red');
gnt.addColorStop(0,'green');
context.fillStyle = gnt;
context.fillRect(0,0,800,600);

这里需要说明的是createRadialGradient方法,参数有(Xstart,Ystart,radiusStart,XEnd,YEnd,radiusEnd),也就是说,它在实行渐变时,使用了两个圆,一个是原始的圆,一个是渐变式圆,其实,这种通过坐标与半径控制的方式可以实现很多样式,

drawImage绘制图像

1
2
var imageDom=document.getElementById("image"); 
context.drawImage(imageDom,10,10,20,20);   //起点为(10,10),图像大小会变成20x20像素;

shadowColor、shadowOffsetX、shadowOffsetY、shadowBlur阴影

1
2
3
4
5
6
7
context.shadowColor="rgba(0,0,0,0.5)" //设置阴影颜色 
context.shadowOffsetX=5; //设置形状或路径x轴方向的阴影偏移量,默认值为0; 
context.shadowOffsetY=5; //设置形状或路径y轴方向的阴影偏移量,默认值为0; 
context.shadowBlur=4;    //设置模糊的像素数,默认值为0,即不模糊。 
//绘制半透明的蓝色矩形 
context.fillStyle="rgba(0,0,255,1)"; 
context.fillRect(30,30,50,50);

createPattern填充描边模式

1
2
3
4
5
6
7
8
var imageDom=document.images[0]; 
pattern=context.createPattern(imageDom,"repeat"); 
//repeat    默认。该模式在水平和垂直方向重复。
//repeat-x  该模式只在水平方向重复。
//repeat-y  该模式只在垂直方向重复。
//no-repeat 该模式只显示一次(不重复)。
context.fillStyle=pattern; 
context.fillRect(10,10,150,150);

scale、translate、rotate图像变换

1
2
3
4
5
6
7
8
9
10
11
12
//缩放图像 
//scale(scaleX,scaleY):缩放图像,在x方向乘以scaleX,在y方向乘以scaleY。 
//scaleX和scaleY的默认值都是1.0 
context.scale(0.8,0.8); 
 
//变换原点 
//translate(x,y):将坐标原点移动到(x,y)。执行这个变换后,坐标(0,0)会变成之前由(x,y)表示的点 
context.translate(100,100); 
 
//旋转
//rotate(angle):围绕原点旋转图像angle弧度
context.rotate(1);

toDataURL将canvas转化为图片数据

1
2
3
4
var imgurl = canvasDom.toDataURL("image/png");
var image = document.createElement("img");
image.src = imgurl;
hintdiv1.appendChild(image);

 

  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: