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

canvas入门-2路径、文字

2024-07-13 11:27:28   224人阅读

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 时，渲染不出来文字？


联系
我们