canvas属性常用方法整理

绘制线段

将放入web页面时,第一件事是看整个页面是否已经加载,并且开始操作前是否所有html元素都已经展现.
为做到这一点,用window的load事件监听,该事件在html页面加载结束时发生

ctx.strokeStyle = 'rgb(150,0,0)';
ctx.fillStyle = 'rgb(0,150,0)';
ctx.lineWidth = 1;
ctx.moveTo(x,0);
ctx.lineTo(x,height);
ctx.stroke();

绘制虚线

有一个setLineDash属性,接受一个数组作为参数,表示实虚部分比例

ctx.setLineDash([5,2]);
ctx.lineWidth = 1;
ctx.moveTo(x,0);
ctx.lineTo(x,height);
ctx.stroke();

如要要绘制圆点线,没有现成的封装,可以自己用圆循环的方法封装
绘制线段线型:包括线宽,线段端点,线段连接点
线宽:要注意1像素宽的线和屏幕像素的问题
线段端点:ctx.lineCap=‘butt/round/square’
线段连接点:ctx.lineJoin=‘round/bevel/miter’

绘制圆和圆弧

var myCanvas = document.getElementById(‘myCanvas’);
var ctx = myCanvas.getContext(‘2d’);
ctx.save();
ctx.lineWidth=10;线宽
ctx.strokeStyle=’#e3f’;字体样式
ctx.beginPath(); 开始一个新的绘制路径,每次绘制新路径之前调用,重置内存中的所有路径
moveTo(); 如果有moveTo起点,则以它为起点,连接到圆弧,否则的话,以圆弧startRad为起点.
ctx.arc(x, y, r,startRad,endRad,[true/false]);
ctx.closePath();如果当前路径是打开的,则关闭该绘制路径 起点和终点以一条直线连接,自动闭合;
ctx.stroke()/fill(); stroke表示弧线,fill表示充满,是扇形
arcTo(x1,y1,x2,y2,r)画圆弧,与∠(x0,y0),(x1,y1),(x2,y2)内切的直径r的小圆弧,(x0,y0)指moveTo()指定的起点

//如下是一个绘制圆角矩形的通用方法:

 function drawRoundedRect(ctx, x, y, width, height, r,  fill, stroke) {
    	ctx.save();
    	ctx.beginPath();
    	ctx.moveTo(x + r, y);
    	ctx.arcTo(x + width, y, x + width, y + r, r);
    	ctx.arcTo(x + width, y + height, x + width - r, y + height, r);
    	ctx.arcTo(x, y + height, x, y + height - r, r);
    	ctx.arcTo(x, y, x + r, y, r);
    	if (fill) {
    		ctx.fill();
    	}
    	if (stroke) {
    		ctx.stroke();
    	}
    	ctx.restore();
    }

绘制矩形

1,可以用画线段方式画矩形
2,rect(x,y,width,height),x,y表示矩形左上角位置
ctx.rect(30,30,200,200);
ctx.stroke()/fill();
3,fillRect(x,y,width,height),strokeRect(x,y,width,height)直接用,相当于2方法的缩写
clearRect(x,y,width,height)清楚画布

线性渐变

使用步骤
（1）var grd = context.createLinearGradient( xstart , ystart, xend , yend )创建一个线性渐变，设置起始坐标和终点坐标；
（2）grd.addColorStop( stop , color )为线性渐变添加颜色，stop为0~1的值；
（3）context.fillStyle=grd将赋值给context。

径向渐变

该方法与线性渐变使用方法类似，只是第一步接收的参数不一样
var grd = context.createRadialGradient(x0 , y0, r0 , x1 , y1 , r1 );接收起始圆心的坐标和圆半径以及终点圆心的坐标和圆的半径。

位图填充

createPattern( img , repeat-style )使用图片填充，repeat-style可以取repeat、repeat-x、repeat-y、no-repeat。

var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");

    //线性渐变
    var grd = context.createLinearGradient( 10 , 10, 100 , 350 );
    grd.addColorStop(0,"#1EF9F7");
    grd.addColorStop(0.25,"#FC0F31");
    grd.addColorStop(0.5,"#ECF811");
    grd.addColorStop(0.75,"#2F0AF1");
    grd.addColorStop(1,"#160303");
    context.fillStyle = grd;
    context.fillRect(10,10,100,350);

    //径向渐变
    var grd = context.createRadialGradient(325 , 200, 0 , 325 , 200 , 200 );
    grd.addColorStop(0,"#1EF9F7");
    grd.addColorStop(0.25,"#FC0F31");
    grd.addColorStop(0.5,"#ECF811");
    grd.addColorStop(0.75,"#2F0AF1");
    grd.addColorStop(1,"#160303");
    context.fillStyle = grd;
    context.fillRect(150,10,350,350);

    //位图填充
    var bgimg = new Image();
    bgimg.src = "background.jpg";
    bgimg.function(){
        var pattern = context.createPattern(bgimg, "repeat");
        context.fillStyle = pattern;
        context.strokeStyle="#F20B0B";
        context.fillRect(600, 100, 200,200);
        context.strokeRect(600, 100, 200,200);
    };

贝赛尔曲线

ctx.quadraticCurveTo(x1,y1,x2,y2)二阶赛贝尔曲线
ctx.bezierCurveTo(x1,y1,x2,y2,x3,y3)二阶赛贝尔曲线

https://www.w3cplus.com/canvas/drawing-curve.html详情请见

坐标系偏移,旋转,缩放

translate(x,y) 将坐标平移到给定的xy坐标处
rotate(angle)	旋转弧度,以0,0为圆心,如果要以图形中心为圆心,先用translate平移
scale(x,y)	缩放比例,默认是1,1

绘制文本

fillText(text,x,y,[maxWidth])
strokeText(text,x,y,[maxWidth])

字体属性设置ctx.font/testAlign/testBaseline/direction=… css中的font/文本对齐设置/文本基线对齐设置/文本方向设置
TextMetrics()获取字符串的像素宽度