www.hj8828.com 19

www.hj8828.comymyang 绘图 实例代码_javascript技巧_脚本之家

引用方法: 复制代码 代码如下:new
gov.Graphic; par1 为绘图数据 复制代码
代码如下:var data=new
period([0,10,22,13,34,25,28,26,30,35,28,34,39,28,26,50,35,28,34,39,55],//y轴数据[188,189,190,191,192,193,194,195,196,197,198,199,200,201,202,203,204,205,206,207,208]//x轴数据
); par2 为绘图的容器层id par3 为绘图样式参数,可选参数
私下认可值:复制代码 代码如下:{ height:170,
//绘图区域中度 maxHeight:50, //y轴最高数值 barDistance:26, //x轴坐标间距topDistance:0, //上部填充 bottomDistance:0, //尾巴部分填充 leftDistance:20,
//左部填充 pointWidth:5, //坐标点宽度 pointHeight:5, //坐标点高度pointColor:”#ff0000″, //坐标点颜色 lineColor:”#ffd43a”, //连接线颜色
valueWidth:20, //y轴数值宽度 valueColor:”#000″, //y轴数值颜色
timeWidth:20, //x轴数值宽度 timeColor:”#000″, //x轴数值颜色
disvalue:true, //是不是出示y轴数值 distime:true //是或不是出示x轴数值 }

风姿罗曼蒂克、基本用法

1.要选用canvas成分,需求先给定其width和height来设置绘图区域的大大小小。canvas中间的文本会在浏览器不辅助canvas的情形下显得出来。

<canvas width="1500px" height="1500px" id='drawing'>do not support.</canvas>

2.绘制上下文:

要在canvas绘图,须要经过getContext方法来获得上下文。传入参数“2d”,就能够得到2d上下文。在调用getContext方法在此以前要先判别一下该措施是或不是存在。

var drawing=document.getElementById("drawing");
if(drawing.getContext){//判断方法是否存在
          var context=drawing.getContext('2d');//创建上下文 

}

无标题文书档案

二、常用2D上下文绘图方法

1.填充矩形:

利用钦定的水彩、图片等对图纸实行填空。

  • fillStyle:能够是字符串、渐变对象、情势对象等,用来设置填充区域的效劳;
  • fillRect(x,y,w,d卡塔尔国:在画布上填写钦命的矩形区域,效果使用fillStyle中的设定。方法有七个参数:x坐标、y坐标、宽度、中度。
  • clearRect(x,y,w,d卡塔尔(英语:State of Qatar):打消画布上的钦定区域。方法有七个参数:x坐标、y坐标、宽度、中度。

www.hj8828.com 1

//绘制红色矩形 
context.fillStyle="red";         
context.fillRect(10,10,50,50);    
//绘制蓝色半透明举行       
context.fillStyle="rgba(0,0,255,0.5)";
context.fillRect(30,30,50,50);
//清除中间小矩形块
context.clearRect(35,40,10,10);

www.hj8828.com 2

运营效果:

www.hj8828.com 3

2.制图矩形

  • lineWidth:设置边框线条的小幅度;
  • lineJoin:设置图形的线条交叉处是round、bevel、mitel;
  • shadowColor:用CSS颜色设置阴影颜色;
  • shadowOffsetX:形状或阴影X轴方向偏移值,默认为0;
  • shadowOffsetY:形状或阴影X轴方向偏移值,默以为0;
  • shadowBlur:模糊的像素数,默感觉0。

www.hj8828.com 4

//边框宽度
 context.lineWidth=10;         
 //设置阴影
context.shadowOffsetX=5;
context.shadowOffsetY=5;
 ontext.shadowColor="rgba(0,0,0,0.5)";
context.shadowBlur=4;
//线条拐角处
context.lineJoin="round"; 
//绘制红色矩形
 context.strokeStyle="red";
context.strokeRect(10,100,100,100);
//绘制绿色矩形    
 context.strokeStyle="green";
context.strokeRect(30,130,100,100);

www.hj8828.com 5

www.hj8828.com 6

3.制图路线

能够通过绘制路线来画出复杂的线条和造型。多少个常用艺术:

预备绘制:

  • beginPath(卡塔尔:绘制路线前要先调用该措施,表示就要绘制路径;

绘制:

  • moveTo(x,y卡塔尔(英语:State of Qatar):从当前点将绘图游标移动到(x,y卡塔尔(英语:State of Qatar)而不画线;
  • lineTo(x,y卡塔尔(英语:State of Qatar):从上一条早前绘制一条线,到(x,y卡塔尔(英语:State of Qatar)结束。
  • arc(x,y,radius,start,end,counterclockwise卡塔尔(英语:State of Qatar):绘制以(x,y卡塔尔国为圆心,半径为radius,起头角度为start,结束角度为end的拱形。最后贰个参数表示是不是按逆时针方向总计。

终止绘制:

  • context.closePath(卡塔尔国;//甘休绘制
  • context.fill(卡塔尔;//填充区域
  • context.stroke();//描边

www.hj8828.com 7

//坐标原点移动
context.translate(400,110);
context.lineWidth=1;
//复杂线条
context.beginPath();
context.arc(0,0,100,0,2*Math.PI,false);
context.moveTo(102,0);
context.arc(0,0,103,0,2*Math.PI,false); 
context.closePath();//结束绘制

www.hj8828.com 8

4.绘制文本

设置文本格式:

  • font:设置文本的书体、颜色、大小;
  • text阿里gn:文本对齐格局,包含start,end,center;
  • textBaseline:文本的基线。

绘制文本:

fillText(text,x,y卡塔尔(英语:State of Qatar):使用fillStyle属性绘制文本,个中参数text是要绘制的公文内容,x,y表示坐标地点。

www.hj8828.com 9

//绘制文本

context.font="bold 14px";
context.textBaseline="middle";
context.textAlign="center";
context.fillText("12",0,-90);
context.fillText("3",90,0);
context.fillText("6",0,90);
context.fillText("9",-90,0); 
//绘制表盘指针 
context.moveTo(0,0);
context.lineTo(70,0);
context.moveTo(0,0);
context.lineTo(0,-80);
context.stroke();

www.hj8828.com 10

 

www.hj8828.com 11

5.制图图像

要将图像绘制到画布上,供给调用drawImage方法。该形式最多有9个参数:

drawImage(image,源图像x坐标,源图像y坐标,源图像宽度,源图像中度,目的图像x坐标,指标图像y坐标,指标图像宽度,指标图像中度卡塔尔(قطر‎。

//绘制图像 
var img=document.getElementById("img");
context.drawImage(img,0,0,112,150,300,100,112,150);
context.drawImage(img,0,0,112,150,390,220,56,75);

www.hj8828.com 12

6.模式

格局正是选拔重复的图像实行填空大概描边效果。

createPattern(image,pattern卡塔尔(英语:State of Qatar):该办法用来成立叁个新情势。第一个参数时一个image对象,第3个参数表示图像的重复情势:repeat,repeat-x,repeat-y,no-repeat.

var pattern=context.createPattern(img,"repeat");
context.fillStyle=pattern;
context.fillRect(0,400,300,300);

www.hj8828.com 13

7.渐变 CanvasGradient

①创建线性渐变:

线性渐变先调用方法创设渐变对象:createLinearGradient(源点x坐标,源点y坐标,终点x坐标,终点y坐标卡塔尔国;

然后调用方法钦点色标:addColorStop(x,y卡塔尔当中x是色标地方是0-1时期的数值,y是css表示的颜色。

接下来调用fillStyle只怕strokeStyle设置成渐变对象,就能够了。

www.hj8828.com 14

//线性渐变
var gradient=context.createLinearGradient(-200,200,-100,300);
gradient.addColorStop(0,'white');
gradient.addColorStop(1,'black');
context.fillStyle=gradient;
context.fillRect(-200,200,100,100);

www.hj8828.com 15

www.hj8828.com 16

②创办放射渐变:

始建渐变对象:调用createRadialGradient(起源圆心x坐标,源点圆心y坐标,起源圆半径,终点圆x坐标,终点圆y坐标,终点圆半径);

调用addColorStop(卡塔尔方法设置色标;

将fillStyle恐怕strokeStype设置成放射渐变对象。

www.hj8828.com 17

//放射渐变
var gradientR=context.createRadialGradient(200,200,10,200,200,100);
gradientR.addColorStop(0,'white');
gradientR.addColorStop(1,'blue');
context.fillStyle=gradientR;
context.fillRect(100,100,200,200);

www.hj8828.com 18

www.hj8828.com 19

 

www.hj8828.com 20www.hj8828.com 21

var context = document.getElementById("myCanvas");

if(context.getContext){ //判断方法
    var context = context.getContext('2d'); //创建上下文
    context.fillRect(0,0,100,100); //fillStyle默认是black
    context.fillStyle = "red";
    context.fillRect(120,0,100,100);
    context.strokeRect(0,120,100,100);//strokeStyle默认是black
    context.strokeStyle = "blue";
    context.strokeRect(120,120,100,100);

    context.fillStyle = "rgba(0,0,255,0.5)"; //设置透明度
    context.fillRect(0,240,100,100);

    context.clearRect(50,270,10,10); //清除小矩形

    context.lineWidth = 10;  //设置框宽度
    //设置阴影
    context.shadowOffsetX = 5;
    context.shadowOffsetY = 5;
    context.shadowColor = "rgba(0,0,0,0.5)";
    context.shadowBlur = 4;

    context.strokeStyle = "red";

    context.strokeRect(120,240,100,100);
    //线条拐角处
    context.lineJoin = "round";
    context.strokeRect(0,360,100,100);

    //坐标原点移动
    context.translate(120,360);

    context.lineWidth = 1;

    context.fillRect(0,0,100,100);

    context.translate(240,-240);

    //复杂线条
    context.beginPath();
    context.arc(0, 200, 100, 0, Math.PI * 2, true);
    //context.moveTo(100,0);

    context.arc(0,0,103,0,2*Math.PI,false);
    context.closePath();//绘制结束
    context.fillStyle = "rgba(0,0,255,0.5)";
    context.fill();

}

View Code

 

 

转自:http://www.cnblogs.com/janes/p/3843191.html