canvas绘制文本
strokeText()绘制的是空心的文本,fillText设置的是实心的文本
<
script
>
var canvas = document . getElementById ( "canvas" );
var ctx = canvas . getContext ( "2d" );
ctx . font = "30px 微软雅黑 " ;
ctx . strokeStyle = "hotpink" ;
ctx . strokeText ( "Hello Javascript!" , 50 , 50 );
ctx . fillStyle = "red" ;
ctx . fillText ( "Javascript 是世界上最好的语言 " , 50 , 200 );
// ctx.beginPath();
ctx . strokeStyle = "blue" ;
ctx . strokeText ( "Hello Javascript!" , 50 , 300 );
</ script >
var canvas = document . getElementById ( "canvas" );
var ctx = canvas . getContext ( "2d" );
ctx . font = "30px 微软雅黑 " ;
ctx . strokeStyle = "hotpink" ;
ctx . strokeText ( "Hello Javascript!" , 50 , 50 );
ctx . fillStyle = "red" ;
ctx . fillText ( "Javascript 是世界上最好的语言 " , 50 , 200 );
// ctx.beginPath();
ctx . strokeStyle = "blue" ;
ctx . strokeText ( "Hello Javascript!" , 50 , 300 );
</ script >
绘制文字的对其方式:
textAlign:start(左对齐) end(右对齐) center(居中对齐)
示例demo:
<
script
>
//textAlign :设置文本的水平对齐方式 i
// 默认值: start--->left 左对齐
// end--->right 右对齐
// center :居中对齐
var canvas = document . getElementById ( "canvas" );
var ctx = canvas . getContext ( "2d" );
ctx . moveTo ( 300 , 0 );
ctx . lineTo ( 300 , 600 );
ctx . stroke ();
ctx . textAlign = "center" ;
ctx . font = "30px 微软雅黑 " ;
ctx . strokeStyle = "hotpink" ;
ctx . strokeText ( "Hello Javascript!" , 300 , 50 );
</ script >
//textAlign :设置文本的水平对齐方式 i
// 默认值: start--->left 左对齐
// end--->right 右对齐
// center :居中对齐
var canvas = document . getElementById ( "canvas" );
var ctx = canvas . getContext ( "2d" );
ctx . moveTo ( 300 , 0 );
ctx . lineTo ( 300 , 600 );
ctx . stroke ();
ctx . textAlign = "center" ;
ctx . font = "30px 微软雅黑 " ;
ctx . strokeStyle = "hotpink" ;
ctx . strokeText ( "Hello Javascript!" , 300 , 50 );
</ script >
measureText()方法获取绘制的文本的宽度;
示例demo:
<
script
>
var canvas = document . getElementById ( "canvas" );
var ctx = canvas . getContext ( "2d" );
// 在计算文本宽度的时候,会自动判定当前状态下设置的字体大小
var obj=ctx . measureText ( "Hello Javascript!" );
console . log ( obj . width ); // 获取文本的宽度
</ script >
var canvas = document . getElementById ( "canvas" );
var ctx = canvas . getContext ( "2d" );
// 在计算文本宽度的时候,会自动判定当前状态下设置的字体大小
var obj=ctx . measureText ( "Hello Javascript!" );
console . log ( obj . width ); // 获取文本的宽度
</ script >
绘制文本的垂直对其方式:
textBaseline属性,取值为top hanging middle baseline bottom,默认为基线对其
<
script
>
var canvas = document . getElementById ( "canvas" );
var ctx = canvas . getContext ( "2d" );
// 绘制水平的参考线:
ctx . moveTo ( 0 , 50 );
ctx . lineTo ( 800 , 50 );
ctx . stroke ();
ctx . textBaseline = "middle" ;
ctx . font = "30px 微软雅黑 " ;
ctx . strokeStyle = "hotpink" ;
ctx . strokeText ( "Hello Javascript!" , 300 , 50 );
// ctx.strokeText(" 我是中国人,我爱我的祖国 ",300,50);
</ script >
var canvas = document . getElementById ( "canvas" );
var ctx = canvas . getContext ( "2d" );
// 绘制水平的参考线:
ctx . moveTo ( 0 , 50 );
ctx . lineTo ( 800 , 50 );
ctx . stroke ();
ctx . textBaseline = "middle" ;
ctx . font = "30px 微软雅黑 " ;
ctx . strokeStyle = "hotpink" ;
ctx . strokeText ( "Hello Javascript!" , 300 , 50 );
// ctx.strokeText(" 我是中国人,我爱我的祖国 ",300,50);
</ script >
<
script
>
var canvas = document . getElementById ( "canvas" );
var ctx = canvas . getContext ( "2d" );
// 绘制水平的参考线:
ctx . moveTo ( 0 , 50 );
ctx . lineTo ( 800 , 50 );
ctx . stroke ();
ctx . textBaseline = "hanging" ;
ctx . font = "30px 微软雅黑 " ;
ctx . strokeStyle = "hotpink" ;
// ctx.strokeText("Hello Javascript!",300,50);
ctx . strokeText ( " 我是中国人,我爱我的祖国 " , 300 , 50 );
</ script >
var canvas = document . getElementById ( "canvas" );
var ctx = canvas . getContext ( "2d" );
// 绘制水平的参考线:
ctx . moveTo ( 0 , 50 );
ctx . lineTo ( 800 , 50 );
ctx . stroke ();
ctx . textBaseline = "hanging" ;
ctx . font = "30px 微软雅黑 " ;
ctx . strokeStyle = "hotpink" ;
// ctx.strokeText("Hello Javascript!",300,50);
ctx . strokeText ( " 我是中国人,我爱我的祖国 " , 300 , 50 );
</ script >
<
script
>
var canvas = document . getElementById ( "canvas" );
var ctx = canvas . getContext ( "2d" );
// 绘制水平的参考线:
ctx . moveTo ( 0 , 50 );
ctx . lineTo ( 800 , 50 );
ctx . stroke ();
ctx . textBaseline = "bottom" ;
// ctx.textBaseline="top";
ctx . font = "30px 微软雅黑 " ;
ctx . strokeStyle = "hotpink" ;
// ctx.strokeText("Hello Javascript!",300,50);
ctx . strokeText ( " 我是中国人,我爱我的祖国 " , 300 , 50 );
</ script >
var canvas = document . getElementById ( "canvas" );
var ctx = canvas . getContext ( "2d" );
// 绘制水平的参考线:
ctx . moveTo ( 0 , 50 );
ctx . lineTo ( 800 , 50 );
ctx . stroke ();
ctx . textBaseline = "bottom" ;
// ctx.textBaseline="top";
ctx . font = "30px 微软雅黑 " ;
ctx . strokeStyle = "hotpink" ;
// ctx.strokeText("Hello Javascript!",300,50);
ctx . strokeText ( " 我是中国人,我爱我的祖国 " , 300 , 50 );
</ script >
绘制圆弧
1. arc(圆心 x,圆心 y,半径,开始弧度,结束弧度 ,是否以逆时针方式绘制 )
2. 整个圆是 2*Math.PI的, 0的位置位于圆心水平往右拉直线, Math.PI/2就位于圆心的正下方
3. 默认的绘制方式是:顺时针,可以通过 arc方法的底 6个参数传递值为 true表示逆时针方式绘制
1. arc(圆心 x,圆心 y,半径,开始弧度,结束弧度 ,是否以逆时针方式绘制 )
2. 整个圆是 2*Math.PI的, 0的位置位于圆心水平往右拉直线, Math.PI/2就位于圆心的正下方
3. 默认的绘制方式是:顺时针,可以通过 arc方法的底 6个参数传递值为 true表示逆时针方式绘制
利用arc方法绘制圆弧,接收六个参数
示例demo:
<
script
>
var canvas = document . getElementById ( "canvas" );
var ctx = canvas . getContext ( "2d" );
ctx . arc ( 300 , 300 , 150 , - 0.7 * Math . PI , 0.5 * Math . PI );
ctx . stroke ();
</ script >
var canvas = document . getElementById ( "canvas" );
var ctx = canvas . getContext ( "2d" );
ctx . arc ( 300 , 300 , 150 , - 0.7 * Math . PI , 0.5 * Math . PI );
ctx . stroke ();
</ script >
<
script
>
var canvas = document . getElementById ( "canvas" );
var ctx = canvas . getContext ( "2d" );
// 弧度的值:圆弧上的点
// 规定:从圆心往右接触到的这个点对应的弧度值为: 0
// 从弧度为 0 的位置开始顺时针旋转,弧度的值越来越大
// 转 60 度: -->PI/3
// 90 度: -->PI/2
// 180 度: -->PI
// 270 度: 1.5PI
// 360 度: 2PI
// 从弧度为 0 的位置开始逆时针旋转,弧度的值越来越小
// 弧度差:形成的夹角对应的弧度
</ script >
var canvas = document . getElementById ( "canvas" );
var ctx = canvas . getContext ( "2d" );
// 弧度的值:圆弧上的点
// 规定:从圆心往右接触到的这个点对应的弧度值为: 0
// 从弧度为 0 的位置开始顺时针旋转,弧度的值越来越大
// 转 60 度: -->PI/3
// 90 度: -->PI/2
// 180 度: -->PI
// 270 度: 1.5PI
// 360 度: 2PI
// 从弧度为 0 的位置开始逆时针旋转,弧度的值越来越小
// 弧度差:形成的夹角对应的弧度
</ script >
绘制圆弧的demo:
<
script
>
var canvas = document . getElementById ( "canvas" );
var ctx = canvas . getContext ( "2d" );
ctx . arc ( 300 , 300 , 150 , 0.7 * Math . PI , 1.3 * Math . PI );
ctx . stroke ();
ctx . beginPath ();
ctx . arc ( 400 , 300 , 150 , 1.3 * Math . PI , 0.7 * Math . PI , true );
ctx . stroke ();
</ script >
var canvas = document . getElementById ( "canvas" );
var ctx = canvas . getContext ( "2d" );
ctx . arc ( 300 , 300 , 150 , 0.7 * Math . PI , 1.3 * Math . PI );
ctx . stroke ();
ctx . beginPath ();
ctx . arc ( 400 , 300 , 150 , 1.3 * Math . PI , 0.7 * Math . PI , true );
ctx . stroke ();
</ script >
绘制实心的圆弧:
<
script
>
var canvas = document . getElementById ( "canvas" );
var ctx = canvas . getContext ( "2d" );
ctx . moveTo ( 300 , 300 );
ctx . arc ( 300 , 300 , 150 , 0 , Math . PI / 3 );
ctx . fill ();
</ script >
var canvas = document . getElementById ( "canvas" );
var ctx = canvas . getContext ( "2d" );
ctx . moveTo ( 300 , 300 );
ctx . arc ( 300 , 300 , 150 , 0 , Math . PI / 3 );
ctx . fill ();
</ script >
圆动画:demo
<
script
>
var canvas = document . getElementById ( "canvas" );
var ctx = canvas . getContext ( "2d" );
var endRadian=- 0.4 * Math . PI ;
var timer= setInterval ( function (){
ctx . clearRect ( 0 , 0 , canvas . width , canvas . height );
ctx . beginPath ();
ctx . moveTo ( 300 , 300 );
ctx . arc ( 300 , 300 , 150 , - 0.5 * Math . PI , endRadian );
ctx . fill ();
// 清除定时器:
if ( endRadian>= 1.5 * Math . PI ){
clearInterval ( timer );
}
console . log ( "stop" );
endRadian+= 0.01 * Math . PI ;
}, 20 )
</ script >
var canvas = document . getElementById ( "canvas" );
var ctx = canvas . getContext ( "2d" );
var endRadian=- 0.4 * Math . PI ;
var timer= setInterval ( function (){
ctx . clearRect ( 0 , 0 , canvas . width , canvas . height );
ctx . beginPath ();
ctx . moveTo ( 300 , 300 );
ctx . arc ( 300 , 300 , 150 , - 0.5 * Math . PI , endRadian );
ctx . fill ();
// 清除定时器:
if ( endRadian>= 1.5 * Math . PI ){
clearInterval ( timer );
}
console . log ( "stop" );
endRadian+= 0.01 * Math . PI ;
}, 20 )
</ script >