canvas基础（一）划线、调整字间距

声明canvas标签

<canvas id="can" width="500" height="500">
	如果不支持此标签的显示方式：
</canvas>

基础动作：划线

		const canvas = document.querySelector("#can");
		const ctx = canvas.getContext("2d");//3d为webgl
		ctx.moveTo(100,100);//首先移动到某个点；
		ctx.lineTo(200,100);//然后画一条到某个地方的线条
		ctx.lineTo(100,200);//同上；
		ctx.closePath();//闭合（回到原点）；
		//ctx.lineTo(100,100);//回到原点也是闭合的意思
        
        // 设置属性；
		ctx.lineWidth = '10';//设置线条的宽度；不能加单位
        ctx.strokeStyle = 'blue';//rgba(0,222,255,.5)
        //然后将属性应用；
        ctx.stroke();//描绘；描边；这一步让线条有了颜色；默认黑色
        // 设置属性；
        ctx.fillStyle = 'red';
        //然后将属性应用；
		ctx.fill();

简单套用其他js方法；

//canvas的0,0坐标位于左上角；向下y轴增加；向右x轴增加
const canvas = document.querySelector("#can");
canvas.style.border = '1px solid red';//此属性设置的是元素的样式；
const ctx = canvas.getContext("2d");
for(let i = 0 ; i< canvas.width/20 ; i++){
    ctx.moveTo(0,i*20);
    ctx.lineTo(canvas.width,i*20)
    
    ctx.moveTo(i*20,0);
    ctx.lineTo(i*20,canvas.height)
}
//for循环的一个围棋盘；；；
ctx.lineWidth = '.5';       //可以宽度设在1以下（所画线的样式）
ctx.strokeStyle = 'blue'
ctx.stroke()

开始一个新的绘图；

	const canvas = document.querySelector("#myc");
	canvas.style.border = '1px solid red';//此属性设置的是元素的样式；
	const ctx = canvas.getContext("2d");
	for(let i = 0 ; i< canvas.width/20 ; i++){
	    ctx.beginPath();//如果不新开一个的话；新的绘图的样式会影响上面的绘图的样式；
	    ctx.moveTo(0,i*20);
	    ctx.lineTo(canvas.width,i*20);
	    ctx.strokeStyle = 'green';
	    ctx.stroke();
		
		//**新开的绘图会继承就得绘图的样式**
	    ctx.beginPath();
	    ctx.moveTo(i*20,0);
	    ctx.lineTo(i*20,canvas.height);
	    ctx.lineWidth = '10'
	    ctx.strokeStyle = 'blue'
	    ctx.stroke()
	}

开始路径
ctx.beginPath();
移动绘制点；
ctx.moveTo(x,y);
描述绘制路径
ctx.lineTo(x,y)
ctx.lineTo(x1,y2)
闭合路径
ctx.closePath(x,y)
描边
ctx.stroke();
填充
ctx.fill

调整字间距

let jxs = '经 销 商：'.replace(/\s/g, String.fromCharCode(8192));
ctx.fillText(jxs, 25, 500)

空白字符的unicode值

canvas基础知识（二）画矩形、饼

canvas基础知识（三）创建使用图片