摘要:【Web前端开发】前端培训roadmap ● html/css ● 京东项目实操 ● javascript 基础 ● webapi ● javascrip高级 ● jquery基础 ● Ajax ● 阿里百秀项目实践 ● html5/css3 ● canvas ● 移动web实操 ● 电商项目实操 阅读全文
posted @ 2019-11-06 11:07 jane_panyiyun 阅读 (74) 评论 (0) 编辑
摘要:复习 vue单文件方式 xxx.vue 1:准备好配置文件 package.json(包描述文件&& 封装命令npm run dev) + webpack.config.js文件(打包的配置文件) 2:创建index.html(单页应用的页) 3:创建main.js(入口文件) 4:引入vue和相关 阅读全文
posted @ 2020-02-14 13:04 jane_panyiyun 阅读 (3) 评论 (0) 编辑
摘要:关于项目目录结构 Vue介绍 2014年诞生,2013年react,09年angularjs 作者 尤雨溪 核心概念: 组件化 双向数据流 (基于ES5中的defineProperty来实现的), IE9才支持 angular核心: 模块化 双向数据绑定(脏检测:一个数组($watch)) 开发一个 阅读全文
posted @ 2020-02-13 00:29 jane_panyiyun 阅读 (4) 评论 (0) 编辑
摘要:折线图 绘制网格 布置好canvas <canvas width="600" height="400"></canvas> <style> canvas { border: 1px solid #ccc; } </style> var myCanvas = document.querySelecto 阅读全文
posted @ 2020-02-11 22:21 jane_panyiyun 阅读 (8) 评论 (0) 编辑
摘要:绘制一个由黑到白渐变的矩形 /*线是由点构成的*/ ctx.lineWidth = 30; for (var i = 0; i < 255; i++) { ctx.beginPath(); ctx.moveTo(100 + i - 1, 100); ctx.lineTo(100 + i, 100); 阅读全文
posted @ 2020-02-11 21:22 jane_panyiyun 阅读 (6) 评论 (0) 编辑
摘要:绘制虚线 数组是用来描述你的排列方式的 ctx.setLineDash([5, 15, 10]); 获取虚线的排列方式 获取的是不重复的那一段的排列方式 console.log(ctx.getLineDash()); 虚线的偏移 /*如果是正的值 往后偏移*/ /*如果是负的值 往前偏移*/ ctx 阅读全文
posted @ 2020-02-11 17:14 jane_panyiyun 阅读 (5) 评论 (0) 编辑
摘要:和线相关的属性和方法 ctx.lineCap = "square"; ctx.lineCap = "round"; ctx.lineJoin = 'miter'; /*画平行线*/ ctx.beginPath(); ctx.moveTo(100,100); ctx.lineTo(200,20); c 阅读全文
posted @ 2020-02-11 17:01 jane_panyiyun 阅读 (3) 评论 (0) 编辑
摘要:绘制一个镂空正方形 第一个正方形顺时针轨迹 第二个正方形逆时针轨迹 轨迹值为0,不填充,就是镂空效果了 /*1.绘制两个正方形 一大200一小100 套在一起*/ ctx.moveTo(100, 100); ctx.lineTo(300, 100); ctx.lineTo(300, 300); ct 阅读全文
posted @ 2020-02-11 16:07 jane_panyiyun 阅读 (3) 评论 (0) 编辑
摘要:绘制一个填充的三角形 1. 关闭路径 closePath 2. 填充 fill <script> var myCanvas = document.querySelector('canvas'); var ctx = myCanvas.getContext('2d'); /*1.绘制一个三角形*/ c 阅读全文
posted @ 2020-02-11 14:37 jane_panyiyun 阅读 (4) 评论 (0) 编辑
摘要:绘制三条不同颜色和宽度的平行线 画布 <canvas width="600" height="400"></canvas> 画布加边框显示出来 <style> canvas { border: 1px solid #ccc; } </style> 获取canvas, 准备工具盒context var 阅读全文
posted @ 2020-02-11 14:34 jane_panyiyun 阅读 (8) 评论 (0) 编辑
摘要:绘制平行线&线模糊的问题 1. 准备画布 <!-- 1. 画布 --> <canvas width="600" height="400"></canvas> 2. 加边框,让画布凸显出来 <style> canvas { border: 1px solid #ccc; } </style> 3. 获 阅读全文
posted @ 2020-02-11 14:01 jane_panyiyun 阅读 (4) 评论 (0) 编辑