canvas基础学习笔记（四）
2017-05-02 本文已影响95人
开心糖果的夏天
文字渲染
文字是页面制作必不可少的一部分，漂亮的文字会使网页赏心悦目，关于文字，我们可以设置它的字型、大小、填充、渐变色等等。示例代码如下：
<script type="text/javascript">
window.onload=function(){
var canvas=document.getElementById('canvas');
canvas.width=800;
canvas.height=800;
var context=canvas.getContext('2d');
//开始编码
context.font="bold 40px Arial";
context.fillStyle="#058";
context.fillText("欢迎大家多提意见！",40,100);
context.lineWidth=1;
context.strokeStyle="#058";
context.strokeText("欢迎大家多提意见！",40,200);
//可选参用于控制字符的长度
context.fillText("欢迎大家多提意见！",40,300,100);
context.strokeText("欢迎大家多提意见！",40,400,100);
//渐变字体
var linearGrad=context.createLinearGradient(0,0,800,0);//水平渐变方向
linearGrad.addColorStop(0.0,'red');
linearGrad.addColorStop(0.25,'yellow');
linearGrad.addColorStop(0.5,'green');
linearGrad.addColorStop(0.75,'blue');
linearGrad.addColorStop(1.0,'black');
context.fillStyle=linearGrad;
context.fillText("欢迎大家多提意见！",40,500);
//利用图片填充字体
var backgroundImage=new Image();
backgroundImage.src="img/1.jpg";
backgroundImage.onload=function(){
var pattern=context.createPattern(backgroundImage,"repeat");
context.fillStyle=pattern;
context.font="bold 80px Arial";
context.fillText("Canvas！",40,650);
context.strokeText("Canvas！",40,650);//描边
}
}
</script>
一、font：字型、字号和字体
context.font="bold 80px Arial";//设置字体的样式、大小、字型
context.fillText(String,x,y);//设置所填充的文字以及位置
context.strokeText(String,x,y);//绘制一行文字，这行文字只有外边框
context.fillText(String,x,y,[maxlen]);
context.strokeText(String,x,y,[maxlen]);
[maxlen]为可选参，描述所写文字的最长宽度为多少。
font-style的属性值：normal（默认值）、italic（斜体字）、oblique（倾斜字体）；
font-variant的属性值：normal（默认值）、small-caps（小写字母变为小的大写字母）；
font-weight的属性值：lighter（大多数浏览器不支持）、normal（默认值）、bold、bolder（大多数浏览器不支持）；
font-size的属性值：20px（默认值）、2em、150%、xx-small、x-small、medium、large、x-large、xx-large；
font-family:设置多种字体备选（各个字体之间用逗号隔开）；支持@font-face。
<script type="text/javascript">
window.onload=function(){
var canvas=document.getElementById('canvas');
canvas.width=800;
canvas.height=2000;
var context=canvas.getContext('2d');
//font-style的属性值
context.fillStyle="#058";
context.font="bold 40px sans-serif";
context.fillText("欢迎大家多提意见！",40,100);
context.font="italic bold 40px sans-serif";
context.fillText("欢迎大家多提意见！",40,200);
context.font="oblique bold 40px sans-serif";
context.fillText("欢迎大家多提意见！",40,300);
//font-variant的属性值
context.font="bold 40px sans-serif";
context.fillText("欢迎大家多提意见——Canvas！",40,400);
context.font="small-caps bold 40px sans-serif";
context.fillText("欢迎大家多提意见——Canvas！",40,500);
//font-weight的属性值
context.font="lighter 40px impact";
context.fillText("欢迎大家多提意见！",40,600);
context.font="normal 40px impact";
context.fillText("欢迎大家多提意见！",40,700);
context.font="bold 40px impact";
context.fillText("欢迎大家多提意见！",40,800);
context.font="bolder 40px impact";
context.fillText("欢迎大家多提意见！",40,900);
//font-size的属性值
context.font="lighter 2em impact";
context.fillText("欢迎大家多提意见！",40,1000);
context.font="xx-small sans-serif";
context.fillText("欢迎大家多提意见——Canvas！",40,1100);
context.font="x-small sans-serif";
context.fillText("欢迎大家多提意见——Canvas！",40,1200);
context.font="medium sans-serif";
context.fillText("欢迎大家多提意见——Canvas！",40,1300);
context.font="large sans-serif";
context.fillText("欢迎大家多提意见——Canvas！",40,1400);
context.font="x-large sans-serif";
context.fillText("欢迎大家多提意见——Canvas！",40,1500);
context.font="xx-large sans-serif";
context.fillText("欢迎大家多提意见——Canvas！",40,1600);
}
</script>
二、文本对齐
1.描述文本的横向对齐方式（基准是给定文本的初始坐标值）
context.textAlign="left";
context.textAlign="right";
context.textAlign="center";
<script type="text/javascript">
window.onload=function(){
var canvas=document.getElementById('canvas');
canvas.width=800;
canvas.height=800;
var context=canvas.getContext('2d');
//文本水平对齐
context.fillStyle="#058";
context.font="bold 20px sans-serif";
context.textAlign="left";
context.fillText("textAlign=left",400,100);
context.textAlign="center";
context.fillText("textAlign=center",400,200);
context.textAlign="right";
context.fillText("textAlign=right",400,300);
//辅助线
context.strokeStyle="#888";
context.moveTo(400,0);
context.lineTo(400,400);
context.stroke();
}
</script>
2.描述文本的垂直对齐方式
context.textBaseline="top";
context.textBaseline="middle";
context.textBaseline="bottom";
context.textBaseline="alphabetic";//（默认值）基于拉丁字符的语言
context.textBaseline="ideographic";//基于汉字及日本文字来设置的垂直方向的基准线
context.textBaseline="hanging";//基于印度文的字符串来设计的垂直方向的基准线
<script type="text/javascript">
window.onload=function(){
var canvas=document.getElementById('canvas');
canvas.width=800;
canvas.height=800;
var context=canvas.getContext('2d');
//文本垂直对齐
context.fillStyle="#058";
context.font="bold 20px sans-serif";
context.textBaseline="top";
context.fillText("欢迎大家提意见!",40,100);
drawBaseline(context,100);
context.textBaseline="middle";
context.fillText("欢迎大家提意见！",40,200);
drawBaseline(context,200);
context.textBaseline="bottom";
context.fillText("欢迎大家提意见！",40,300);
drawBaseline(context,300);
function drawBaseline(cxt,b){
var width=cxt.canvas.width;
cxt.save();
cxt.strokeStyle="#888";
cxt.lineWidth=2;
cxt.moveTo(0,b);
cxt.lineTo(width,b);
cxt.stroke();
cxt.restore();
}
}
</script>
3.文本对齐小实例
<script type="text/javascript">
window.onload=function(){
var canvas=document.getElementById('canvas');
canvas.width=800;
canvas.height=800;
var context=canvas.getContext('2d');
//文本垂直对齐
context.fillStyle="#058";
context.font="bold 120px Arial";
context.textAlign="center";
context.textBaseline="middle";
context.fillText("CANVAS",canvas.width/2,canvas.height/2);
context.strokeStyle="#888";
context.moveTo(0,canvas.height/2);
context.lineTo(canvas.width,canvas.height/2);
context.moveTo(canvas.width/2,0);
context.lineTo(canvas.width/2,canvas.height);
context.stroke();
}
</script>
三、文本的度量
context.measureText(string).width
传入字符串将返回一个对象，这个对象拥有一个.width的属性，这个属性将返回传入字符串在canvas中渲染时渲染出的字符串的宽度。
<script type="text/javascript">
window.onload=function(){
var canvas=document.getElementById('canvas');
canvas.width=800;
canvas.height=800;
var context=canvas.getContext('2d');
//文本垂直对齐
context.fillStyle="#058";
context.font="bold 40px sans-serif";
context.fillText("欢迎大家多提意见！",40,100);
var textWidth=context.measureText("欢迎大家多提意见！").width;
context.fillText("以上字符串的宽度为"+textWidth+"px",40,200);
}
</script>
四、总结
在之前学习的基础上绘制一片星空并在合适的位置加上文字，效果图如下：
效果图.jpg
代码如下：
<body >
<canvas id="canvas" style="border: 1px solid #aaa;display: block;margin: 50px auto">
当前浏览器不支持canvas，请更换浏览器后再试
</canvas>
<script type="text/javascript">
window.onload=function(){
var canvas=document.getElementById('canvas');
canvas.width=1024;
canvas.height=800;
var context=canvas.getContext('2d');
//绘制标准五角星
var skyStyle=context.createRadialGradient(canvas.width/2,canvas.height,0,canvas.width/2,canvas.height,canvas.height);
skyStyle.addColorStop(0.0,'#035');
skyStyle.addColorStop(1.0,'black');
context.fillStyle=skyStyle;
context.fillRect(0,0,canvas.width,canvas.height);
for(var i=0;i<200;i++){
var R=Math.random()*5+5;//星星可以变小
var x=Math.random()*canvas.width;
var y=Math.random()*canvas.height*0.65;//js 中的Math.random()随机产生0-1之间的数 星星产生的竖直位置从0到画布高度的65%
var a=Math.random()*360;
drawStar(context,R,x,y,a);
}
fillMoon(context,2,900,200,50,30);
drawLand(context);//绘制绿地,只需要传入上下文的绘图环境
//************************************插入文字
context.fillStyle="#eee";
context.font="bold 30px sans-serif";
context.fillText("开心糖果的夏天！",200,700);
context.fillText("——zhao peirong！",600,750);
}
//******************************************绘制星星
function drawStar(cxt,R,x,y,rot){
cxt.save();
cxt.translate(x,y);//位移
cxt.rotate(rot/180*Math.PI);//旋转
cxt.scale(R,R);
starPath(cxt);//函数的作用是绘制标准的五角星的路径
cxt.fillStyle="#fb3";
cxt.fill();
cxt.restore();
}
function starPath(cxt){
cxt.beginPath();
for(var i=0;i<5;i++){
cxt.lineTo(Math.cos((18+i*72)/180*Math.PI),-Math.sin((18+i*72)/180*Math.PI));
cxt.lineTo(Math.cos((54+i*72)/180*Math.PI)*0.5,-Math.sin((54+i*72)/180*Math.PI)*0.5);
}
cxt.closePath();
}
//******************************************绘制月亮
//d为控制点横坐标的值 x,y表示弯月的位置 R表示弯月的半径
function fillMoon(cxt,d,x,y,R,rot,fillColor){
cxt.save();
cxt.translate(x,y);
cxt.rotate(rot*Math.PI/180);
cxt.scale(R,R);
pathMoon(cxt,d);//绘制弯月的轮廓
cxt.fillStyle=fillColor||"#fb3";//fillColor 不给赋值时，用默认的#fb5
cxt.fill();
cxt.restore();
}
function pathMoon(cxt,d){
cxt.beginPath();
cxt.arc(0,0,1,0.5*Math.PI,1.5*Math.PI,true);
cxt.moveTo(0,-1);
cxt.arcTo(d,0,0,1,dis(0,-1,d,0)/d);//内弧结束的位置为0,1
cxt.closePath();
}
function dis(x1,y1,x2,y2){
return Math.sqrt((x1-x2)*(x1-x2)+(y2-y1)*(y2-y1));
}
//******************************************绘制绿地
function drawLand(cxt){
cxt.save();
cxt.beginPath();
cxt.moveTo(0,600);
cxt.bezierCurveTo(540,400,660,800,1200,600);
cxt.lineTo(1200,800);
cxt.lineTo(0,800);
cxt.closePath();
//填充线性渐变色
var landStyle=cxt.createLinearGradient(0,800,0,0);
landStyle.addColorStop(0.0,'#030');
landStyle.addColorStop(1.0,'#580');
cxt.fillStyle=landStyle;
cxt.fill();
cxt.restore();
}
</script>
</body>
