示例1、绘制一个矩形
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.strokeStyle="#0000ff"; ctx.strokeRect(20,20,150,100);
示例二、绘制渐变矩形
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); var gradient=ctx.createLinearGradient(0,0,170,0); gradient.addColorStop("0","magenta"); gradient.addColorStop("0.5","blue"); gradient.addColorStop("1.0","red"); // 用渐变进行填充 ctx.strokeStyle=gradient; ctx.lineWidth=5; ctx.strokeRect(20,20,150,100);
示例三、渐变笔触来写文本
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.font="30px Verdana"; // 创建渐变 var gradient=ctx.createLinearGradient(0,0,c.width,0); gradient.addColorStop("0","magenta"); gradient.addColorStop("0.5","blue"); gradient.addColorStop("1.0","red"); // 用渐变进行填充 ctx.strokeStyle=gradient; ctx.strokeText("Big smile!",10,50);
示例四、在画布上写文本 "Hello world!" 和 "w3school.com.cn",渐变文字比较,:
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.font="20px Georgia"; ctx.strokeText("Hello World!",10,50); ctx.font="30px Verdana"; // 创建渐变 var gradient=ctx.createLinearGradient(0,0,c.width,0); gradient.addColorStop("0","magenta"); gradient.addColorStop("0.5","blue"); gradient.addColorStop("1.0","red"); // 用渐变填色 ctx.strokeStyle=gradient; ctx.strokeText("w3school.com.cn",10,90);
strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式
context.strokeStyle = color|gradient|pattern;
strokeText 语法:
context.strokeText(text,x,y,maxWidth);
text 规定在画布上输出的文本
x 开始绘制文本的 x 坐标位置 (相对于画布)
y 开始绘制文本的 y 坐标位置(相对于画布)
maxWidth 允许的最大文本宽度,以像素计