首页 > 代码库 > canvas入门-2路径、文字

canvas入门-2路径、文字

1、canvas是一个二维网格坐标系

2、canvas路径

<script type="text/javascript">
//绘制矩形 var oCanvas = document.getElementById(‘canvas-1‘); var context = oCanvas.getContext(‘2d‘);//指向2d渲染环境的引用 context.moveTo(0,0); context.lineTo(0,100); context.lineTo(100,100); context.lineTo(100,0); context.lineTo(0,0); context.stroke();
//用路径的方式绘制一个正方形,注意最后一定要stroke()
//两个主要的方法 moveTo(x,y) lineTo(x,y)

</script>

  

<script type="text/javascript">
//绘制圆形 var oCanvas = document.getElementById(‘canvas-1‘); var context = oCanvas.getContext(‘2d‘);//指向2d渲染环境的引用 context.arc(200,200,20,0,2*Math.PI) context.fillStyle = "#FF0000"; context.stroke();//描边
          context.fill();//填充</script>
arc()的使用方法:
 

context.arc(x,y,r,sAngle,eAngle,counterclockwise);

参数描述
x圆的中心的 x 坐标。
y圆的中心的 y 坐标。
r圆的半径。
sAngle起始角,以弧度计(弧的圆形的三点钟位置是 0 度)。
eAngle结束角,以弧度计。
counterclockwise可选。规定应该逆时针还是顺时针绘图。False = 顺时针,true = 逆时针。

  3、canvas文本

<script type="text/javascript">
//渐变字,此处看图可区分stroke与fill的区别 var oCanvas = document.getElementById(‘canvas-1‘); var context = oCanvas.getContext(‘2d‘);//指向2d渲染环境的引用 context.font = "30px Arial"; var gradient=context.createLinearGradient(0,0,100,0); gradient.addColorStop("0","magenta"); gradient.addColorStop("0.5","blue"); gradient.addColorStop("1.0","red"); context.fillStyle = gradient; //context.fillText(‘学习 canvas‘,50,50); context.strokeText(‘学习 canvas‘,50,50)</script>

  

 

 

context.fillText(text,x,y,maxWidth);方法的使用

text规定在画布上输出的文本。
x开始绘制文本的 x 坐标位置(相对于画布)。
y开始绘制文本的 y 坐标位置(相对于画布)。
maxWidth可选。允许的最大文本宽度,以像素计。

但是有个问题是?为什么x,y设为0,0 时,渲染不出来文字?