canvasziji

2019-07-15 21:07:12 阅读：240 来源： 互联网

标签：canvasziji lineTo 填充 ctx 描边 100 绘制

绘图

准备画布使用标签尺寸在标签里面设置
```
<canvas width="600" height="400" ></canvas>
```

准备绘制工具

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

利用工具绘图

/*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;

绘制渐变的矩形

标签：canvasziji,lineTo,填充,ctx,描边,100,绘制
来源： https://blog.csdn.net/qq_38964133/article/details/96018121

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9