html canvas画布 相关问题

创建画布实现即时绘画画板功能项目中遇见的一些问题
1：矩形绘画工具
描述：矩形框连接四个点，在用onmousedown和onmousemove绘制时内部无法清空内部以绘制的图形，有两个思路 1在绘制过程中先调用closePath清除以起点到终点的以整块区域，2本身是在画线，就清除上一次所绘制的四个线条
不得一提的是，无论1还是2 ，在清除过程中，必然会清除原本在画布上绘制的一些图形，第二种虽然不会出现大面积空白，但在原来图像上会现以线宽为宽度的断点；
引入分层概念？
以解决 利用分层

2：画布图形模糊，写入1px 实际效果缺宽很多

这里的一个基本的小格其实是1，但线条明显糊掉了

//制定的样式
canvas {
				border: 2px solid #CCCCCC;
				width: 500px;
				height: 300px;
				display: block;
				margin: 0 auto;
			}
//制定的线宽
ctx.lineWidth =1;

原理分析：画布的默认宽高是300px*150px，样式写入的宽高实际是在本基础上对画布进行了拉伸，而内部的单位长度相应也被拉伸，所以其实是出现了变形；
解决：运用画布 准备工作使用js也改变画布宽高与css相同

mycan.width = 500;
mycan.height = 300;

同一张图，内部单位长度明显小了//还好我位置都是传入的，不用改太多

3.鼠标落点位置相对于画布产生偏差
描述：由于项目原因，在绘制一个棋盘时需要计算鼠标点击位置判断落子位置

这里设置单位长度，1u=16，左边留出了2u的边界，在判定鼠标边界时第一个点的位置变成了49，

同样1u=10 2u却到了30

代码段中 鼠标事件用到的计算代码段和画布中 的画图属性是同一条

console.log("鼠标落点"+xposit,yposit)
console.log("单位长度"+options.basnumSet.unit)
console.log("右边界点"+ parseInt(2*options.basnumSet.unit+options.basnumSet.unit*options.basnumConst._BLOCKNUM) )

具体原因可能由于画布本身属性，这里解决办法先想办法换算顶替上

下班了不写了

待续