canvasziji

绘图

1. 准备画布 使用 标签 尺寸在标签里面设置

   <canvas width="600" height="400" ></canvas>
   

2. 准备绘制工具

   /*1.获取元素*/
   var myCanvas = document.querySelector('canvas');
   /*2.获取上下文 绘制工具箱 */
   /*是否有3d 暂时没有*/
   var ctx = myCanvas.getContext('2d'); /*web gl 绘制3d效果的网页技术*/
   

3. 利用工具绘图

   /*3.移动画笔*/
   ctx.moveTo(100,100);
   /*4.绘制直线 (轨迹，绘制路径)*/
   ctx.lineTo(200,100);
   /*5.描边*/
   ctx.stroke();
   

在canvas标签里面设置宽高 在style里面设置会出现绘制的图形不一样 这个是关键点

绘制直线

关于线条的问题

默认宽度 默认的颜色是什么

1px 黑色

但是看起来是2px 也不是纯黑的

因为 直线只是按照刻度1的中间画的 占据了2px 变得不饱和了 所以颜色淡了

因为电脑最小单位是1px 导致的 0.5px也会默认显示1px

解决上面的问题

挪动0.5px 在原有的基础上加 0.5px或者减0.5

但是一般不解决 因为不需要如此精细

绘制线条 加上 颜色和宽度

ctx.strokeStyle = 'blue';
ctx.lineWidth = 10;
/*描边*/
ctx.stroke();
分别描边

绘制填充的三角形

描边 描出一个三角形

先通过轨迹画出一个空的三角形

/*1.绘制一个三角形*/
ctx.moveTo(100,100);
ctx.lineTo(200,100);
ctx.lineTo(200,200);
/*起始点和lineTo的结束点无法完全闭合缺角*/
/*使用canvas的自动闭合 */
//ctx.lineTo(100,100);
/*关闭路径*/
ctx.closePath();
ctx.lineWidth = 10;
/*2.描边*/
ctx.stroke();

有设置宽度的时候 会出现 三角形无法闭合 有缺角 所以需要在描边的时候 加上这个闭合代码

少画图形的一条边实现闭合

//ctx.lineTo(100,100);这句代码去掉
ctx.closePath();

如何填充三角形的颜色

ctx.fill(); 
填充

绘制一个镂空的正方形

话两个正方型 一个填充 一个不填充

大图形逆时针进行绘图 小图形进行顺时针 也就是两个正方形的绘制方向是不一样的

使用的规则是 非零环绕规则 在每个图形拉一条线 相交的方向则是 +1 两条是同一方向则是在加1

只有一条线就是加1 初始值为0 当小于等于 颜色不填充

另外 顺时针 就是1 逆时针为1 初始值

只有是0的时候不进行填充 非0的时候进行填充

另外填充颜色 使用

ctx.fillStyle = 'red';

线两端样式 和拐点样式

直线设置可以设置帽子 闭合的图形设置的是拐点

绘制虚线

ctx.setLineDash([5,10]);
传入的数组  数组传入的数字是  实虚  实虚   可以传入多个值  超过两个
ctx.getLineDash();
获取虚线的只是 不重复的那一部分

/*如果是正的值 往后偏移*/
/*如果是负的值 往前偏移*/
ctx.lineDashOffset = -20;

绘制渐变的矩形