canvas--初级

摘要：

• canvas:默认宽高为300*150，需用canvas的API定义其宽高
• 绘画路径以beginPath()开始,以closePath()结束
• 常用方法fill()、stroke()、rect()、arc()、text()、lineTo()、moveTo()

以下为代码： var c=document.getElementById("mycanvas"); var ctx=c.getContext("2d");

ctx.beginPath();
ctx.lineWidth = 3;
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.lineTo(100,30);
ctx.closePath();
ctx.stroke();

ctx.beginPath();
ctx.rect(0,130,200,100);
ctx.fillStyle="green";
ctx.fill();
ctx.closePath()

ctx.beginPath();
var g=ctx.createRadialGradient(300,300,10,400,350,50);
g.addColorStop(0,"green");
g.addColorStop(0.5,"blue");
g.addColorStop(1,"red");
ctx.fillStyle=g;
ctx.arc(300,300,100,0,2*Math.PI);
ctx.stroke();
ctx.fill();

ctx.beginPath();
ctx.font="30px Arial";
ctx.strokeText("你好,我是canvas绘画字体",300,60);


var grd=ctx.createLinearGradient(300,100,500,100);   //createLinearGradient(starx,stary,endx,endy)
grd.addColorStop(0,"green");
grd.addColorStop(0.5,"blue");
grd.addColorStop(1,"red");

ctx.beginPath();
ctx.font="30px Arial";
ctx.fillStyle=grd;
ctx.fillText("你好,我是canvas绘画字体",300,100);  //fillText("文字",起点x,起点y)复制代码

转载于:https://juejin.im/post/5be8f3cb6fb9a049f069c851