秋夜已凉 02

博客年久失修还是来点音乐吧~~ 去 http://music.xiaoyu.work 都是你爱听的🎵~


  • 首页

  • 归档

Canvas

发表于 2018-10-25

Canvas

栅格

在开始画图之前,需要了解下画布栅格和坐标空间。canvas元素默认被网格所覆盖。通常来说网格中的一个单元相当于canvas元素中的一像素。栅格的起点为左上角(坐标为(0,0))。所有元素的位置都相对于原点定位。

绘制矩形

不同于SVG,HTML中的元素canvas只支持一种原生的图形绘制:矩形。
三种方式绘制矩形:

fillRect(x, y, width, height)  //绘制一个填充的矩形
strokeRect(x, y, width, height)  //绘制一个矩形的边框
clearRect(x, y, width, height)  //清除指定矩形区域,让清除部分完全透明。

上述方法中,x y分别指定了在canvas画布上所绘制矩形的左上角的坐标。
width和height设置了矩形的尺寸。
以上的三个函数绘制之后会马上显现在canvas上,即时生效。

绘制路径

  • 首先需要创建路径起始点
  • 然后使用画图命令画出路径
  • 闭合路径
  • 一旦路径生成就可以通过描边或者填充路径区域来渲染图形

Path2D对象

为了简化代码和提高性能,path2的对象已经可以在较新的浏览器中使用,用来缓存或者记录绘制命令,这样就可以快速的回顾路径。

Path2D()

函数,将会返回一个新初始化的Path2D对象(可将一个路径作为变量–创建一个他的副本,或者将一个包含svg path数据的字符串作为变量)

new Path2D();   //空的Path对象
new Path2D(path) // 克隆Path对象
new Path2D(d);     //从svg建立Path对象

所有的路径方法比如 moveTo, rect, arc 或 quadraticCurveTo等,如我们前面见过的,都可以在Path2D中使用。

Path2D API 添加了 addPath作为将path结合起来的方法。当你想要从几个元素中来创建对象时,这将会很实用。比如

Path2D.addPath(path [, transform])

添加一条路径到当前路径(可能添加了一个变换矩阵)

使用svg paths

新的path2d api有另一个强大的特点,就是使用svg path data来初始化canvas上的路径。这将使你获取路径时可以以SVG或canvas的方式来重用它们。

var p = new Path2D("M10 10 h 80 v 80 h -80 z")

上面一段svg路径的意思是: 现将路径移动到点(M10 10),然后再水平移动80个单位(h 80),然后下移80个单位(v 80),接着左移80个单位(h -80),再回到起点处(z)

色彩Colors

fillStyle = color 设置图形的填充颜色

strokeStyle = color 设置图形轮廓的颜色

color 可以是表示 CSS 颜色值的字符串,渐变对象或者图案对象。我们迟些再回头探讨渐变和图案对象。默认情况下,线条和填充颜色都是黑色(CSS 颜色值 #000000)。

注意: 一旦您设置了 strokeStyle 或者 fillStyle 的值,那么这个新值就会成为新绘制的图形的默认值。如果你要给每个图形上不同的颜色,你需要重新设置 fillStyle 或 strokeStyle 的值。

您输入的应该是符合 CSS3 颜色值标准 的有效字符串。下面的例子都表示同一种颜色。

// 这些 fillStyle 的值均为 '橙色'
ctx.fillStyle = "orange";
ctx.fillStyle = "#FFA500";
ctx.fillStyle = "rgb(255,165,0)";
ctx.fillStyle = "rgba(255,165,0,1)";

sea.js

发表于 2018-10-08

seajs

在seajs中,所有的JavaScript模块都遵循CMD模块定义规范,该规范明确了模块的基本书写格式和基本交互规则。在CMD规范中一个模块就是一个文件。代码的书写格式如下:

define(factory);

define Function

define是一个全局函数,用来定义模块。
define接受factory参数,factory可以是一个函数,也可以是一个对象或者字符串。factory为对象、字符串时,表示模块的接口就是该对象、字符串。比如可以如下定义一个json数据模块:

define({“foo”:“bar”});

swiper

发表于 2018-09-20

Swiper

initialSlide

设定初始化时候slide的索引
默认0

<script>
    var ms = new Swiper('.sc',{
        initialSlide: 2,
    })
</script>

autoplay

自动切换的时间间隔

autoplayDisableOnInteraction

用户操作swiper之后,是否禁止autoplay。默认为true:停止。

autoplayStopOnLast

如果设置为true,当切换到最后一个slide时停止自动切换。(loop模式下无效)。

hashnav

如需为每个slide增加散列导航(有点像锚链接)。将hashnav设置为true,并在每个slide处增加data-hash属性。
这样当你的swiper切换时你的页面url就会加上这个属性的值了,你也可以通过进入页面时修改页面url让swiper在初始化时切换到指定的slide。

框架

发表于 2018-09-15

框架解决的问题

框架出现的目的并不是为了提升性能,而是为了可维护性、为了便于团队开发。但是天下没有白吃的午餐,你为了程序的可维护性,出让了一部分性能作为妥协,毕竟什么框架都没有手动原生操作性能高,因为框架要具有适普性,要能处理各种各样的场景.

不同样式风格的输出方式

发表于 2018-07-20

不同样式风格的输出方式

  • 嵌套输出 nested
  • 展开输出 expanded
  • 紧凑输出 compact
  • 压缩输出 compressed

如何在编译sass的时候指定输出风格

  • 命令行编译: sass –watch style.scss:style.css –style compressed

其实就是在原来编译指令的后面加上–style输出风格,所以只要依据需求,把compact compressed这样的参数写在–style后面就行。

  • gulpfile.js代码

    var gulp = require(‘gulp’);
    var sass = require(‘gulp-sass’)

    gulp.task(‘sass’,function(){

    return gulp.src('./sass/**/*.scss')
    .pipe(sass({outputStyle: 'nested'}).on('error',sass.logError)).pipe(gulp.dest('./css'));

    });

就是在原来sass()中加一个outputStyle:编译风格就好了,tips: 在不指定风格的情况下,默认是嵌套输出。

freemarker

发表于 2018-05-20

##freemarker
${…}freemarker将会输出真实的值来替换大括号内的表达式;这样的表达式被称为插值

freemarker标签

标签以#开头。用户自定义的标签使用@来代替#
注释,跟HTML的注释方式相同,但是不会出现在输出中
其他任何不是ftl标签,插值或者注释的内容将会被视为静态文本,这些东西不会被freemarker解析,会被按照原样输出出来。

css手册

发表于 2018-04-19

css手册

position

sticky: css3中新增的定位属性。就像是relative和fixed的合体,当在屏幕中时按照常规流排版,当卷到屏幕外时则表现如fixed。该属性的表现就是现实中见到的吸附效果。

1…67

王晓宇

67 日志
© 2021 王晓宇
由 Hexo 强力驱动
|
主题 — NexT.Muse v5.1.4