- 博客(21)
- 收藏
- 关注
RSS订阅原创 viewport和viewBox 下边对齐
世界可以是无限大，你想让它多大就多大，可以在上面绘制很多东西。但是世界上的所有东西都能被页面看到（视野只能看到视野所看到的部分）被页面看到的部分是视野。视野是可以移动的（类似于截图模式）在 svg中的宽和高（相当于全屏模式）
2022-10-15 15:26:39
286
原创 SVG 矩形、圆形、椭圆、线、折线和多边形的绘制
制作整理不易，以上内容均为原创（参考了部分官方文档和老师整理的案例）。如要引用请附上本文链接，如有疑问可以在评论区畅所欲言，作者看到会第一时间回复，欢迎交流！
2022-10-15 11:26:55
975
原创 SVG的简介
矢量图是通过多个对象的组合生成的，对其中的每一个对象的纪录方式，都是以数学函数来实现的，也就是说，矢量图实际上并不是象位图那样纪录画面上每一点的信息，而是纪录了元素形状及颜色的算法，当你打开一付矢量图的时候，软件对图形象对应的函数进行运算，将运算结果[图形的形状和颜色]显示给你看。构成位图的最小单位是象素，位图就是由象素阵列的排列来实现其显示效果的，每个象素有自己的颜色信息，在对位图图像进行编辑操作的时候，可操作的对象是每个象素，我们可以改变图像的色相、饱和度、明度，从而改变图像的显示效果。
2022-10-15 11:10:32
659
原创 ES6（数组的解构赋值）
而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。也就是说，对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。另一种情况是不完全解构，即等号左边的模式，只匹配一部分的等号右边的数组。本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。如果默认值是一个表达式，那么这个表达式是惰性求值的，即只有在用到的时候，才会求值。如果解构模式是嵌套的对象，而且子对象所在的父属性不存在，那么将会报错。由于数组本质是特殊的对象，因此可以对数组进行对象属性的解构。..
2022-09-01 11:59:17
270
2
原创 canvas绘制地球围绕太阳转、月球围绕地球转
制作整理不易，以上内容均为原创（参考了部分官方文档和老师整理的案例）。如要引用请附上本文链接，如有疑问可以在评论区畅所欲言，作者看到会第一时间回复，欢迎交流！
2022-08-08 12:53:00
605
原创 canvas像素操作、save与restore、合成与变形
如要引用请附上本文链接，如有疑问可以在评论区畅所欲言，作者看到会第一时间回复，欢迎交流！:Canvas状态存储在栈中，每当save()方法被调用后，当前的状态就被推送到栈中保存。:每一次调用 restore 方法，上一个保存的状态就从栈中弹出，所有设定都恢复。(类似数组的pop())其中宽高分别为获取图像宽高时的大小，data则存放的是在该大小内所有的像素点的详细信息。注意：创建一个ImageData对象，默认创建出来的是个透明的。第三部：书写点击事件函数，获取A画布内容，渲染到B画布中。...
2022-08-08 12:46:55
716
原创 canvas圆弧、椭圆、贝塞尔曲线、文本、对齐方式、绘制图片及切图案例
制作整理不易，以上内容均为原创（参考了部分官方文档和老师整理的案例）。如要引用请附上本文链接，如有疑问可以在评论区畅所欲言，作者看到会第一时间回复，欢迎交流！方法返回一个 TextMetrics 对象，包含关于文本尺寸的信息（例如文本的宽度）当前我们用来绘制文本的样式. 这个字符串使用和 CSS font 属性相同的语法.文本对齐选项. 可选的值包括： left, right center.dx,dy,dw,dh:定义切片的目标显示位置和大小。sx,sy,sw,sh:源图像切片位置和大小。......
2022-08-08 12:20:32
973
原创 Html5 canvas绘制折线、使用线性渐变、径向渐变和lineJoin，lineCap属性
想了解更全面的canvas API可以点击右侧: canvas简介及常用APIcanvas使用透明度（globalAlpha）canvas使用线性渐变createLinearGradientcanvas使用径向渐变createRadialGradientcanvas使用lineJoin属性canvas使用lineCap属性......
2022-08-08 11:54:34
411
原创 html5 canvas绘制图形和线段
canvas 标签在页面只显示一个设定背景颜色画布，如果需要需要产生新内容或者进行画图操作，需要借助canvas API（HTML5 的内置对象context）和JavaScript操作实现画图或者其他图像操作。制作整理不易，以上内容均为原创（参考了部分官方文档和老师整理的案例）。如要引用请附上本文链接，如有疑问可以在评论区畅所欲言，作者看到会第一时间回复，欢迎交流！通常来说网格中的一个单元相当于canvas元素中的一像素。想了解更全面的canvas API可以点击右侧: canvas简介及常用API。..
2022-08-08 09:45:09
356
原创 canvas简介和常用的API
目录canvas简介canvas和SVG的区别canvas APIcanvas主要属性与方法颜色、样式和阴影的属性颜色、样式和阴影的方法线条样式矩形方法路径方法转换绘制图像、合成像素操作canvas简介是 HTML5 新增的，一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素。它可以绘制 图形(矩形、曲线、圆)、图表、动画、游戏开发等。有些浏览器不支持canvas，要想有良好的用户体验，可以在canvas标..
2022-07-03 10:16:23
257
原创 ES6 let命令
ES6 let命令目录ES6 let命令基本用法不允许重复申明块级作用域为什么需要块作用域ES6 的块级作用域constconst除了以下两点与let不同外，其他特性均与let相同:本质顶层对象属性与全局变量为了解决这个问题，es6引入的let 、const和class声明的全局变量不再属于顶层对象的属性。基本用法跟使用es5的var一样 BUT 不存在变量提升 var会存在变量提升现象， let和const则不会有这种情况 暂时性死区 .
2022-07-01 11:28:07
128
原创 ES6对象的扩展
对象的扩展目录对象的扩展属性的简洁表示法属性名表达式Object.is()Object.assign()Object.keys()Object.values()Object.entries对象的扩展运算符解构赋值扩展运算符属性的简洁表示法ES6 允许直接写入变量和函数，作为对象的属性和方法。这样的书写更加简洁。const foo = 'bar';const baz = {foo};baz // {foo: "bar"}// 等同于.
2022-07-01 11:15:07
123
原创 ES6数组的扩展
ES6数组的扩展目录ES6数组的扩展扩展运算符含义替代数组的 apply 方法扩展运算符的应用复制数组合并数组与解构赋值结合字符串实现了 Iterator 接口的对象Array.from()Array.of()数组实例的 copyWithin()数组实例的 find() 和 findIndex()数组实例的 fill()for…of数组实例的 entries()，keys() 和 values()数组实例的 includes()
2022-07-01 10:49:39
135
原创 ES6函数的扩展
目录ES6函数的扩展函数参数的默认值基本用法与解构赋值默认值结合使用参数默认值的位置函数的 length 属性作用域rest 参数严格模式name 属性箭头函数基本用法使用注意点函数参数的尾逗号ES6函数的扩展函数参数的默认值基本用法ES6之前，不能直接为函数的参数指定默认值，只能采用变通的方法。function log(x, y = 'World') { console.log(x, y);}log('Hell..
2022-07-01 10:09:34
109
原创 ES6数组的解构赋值
ES6数组的解构赋值基本用法ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。es5一次声明多个变量var a = 1, b = 2, c = 3, ...;es6一次声明多个变量let [a,b,c] = [1,2,3];//a = 1//b = 2//c = 3本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。let [foo, [[ba.
2022-07-01 09:27:02
520
原创 ES6字符串扩展
ES6字符串扩展includes()、startWith()、endsWith()传统上，JavaScript 只有indexOf方法，可以用来确定一个字符串是否包含在另一个字符串中。ES6 又提供了三种新方法。includes()：返回布尔值，表示是否找到了参数字符串。 startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。 endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。let s = 'Hello world!';s.startsWit
2022-07-01 09:02:13
108
原创 ES6数值的扩展
ES6 在对象上，新提供了和两个方法。用来检查一个数值是否为有限的（finite）。用来检查一个值是否为。和全局函数 相比，该方法不会强制将参数转换成数字，只有在参数是真正的数字类型，且值为 的时候才会返回 。Number.parseInt()、Number.parseFloat()ES6 将全局方法和，移植到对象上面，行为完全保持不变。这样做的目的，是逐步减少全局性方法，使得语言逐步模块化。Number.isInteger()用来判断一个值是否为整数。需要注意的是，
2022-07-01 08:47:24
167
原创 HTML5拖放API使用及小案例实现
H5拖放API使用及小案例实现H5拖放APIHTML5定义的拖放指的是用户可以使用鼠标左键点击选中允许拖放的元素或文件，在保持鼠标左键按下的情况下可以移动该元素至页面的任意位置，并且在移动到处于具有允许放置状态的元素上释放鼠标左键放置被拖放的元素。其中从鼠标左键按下选中元素，到保持鼠标左键按下并移动该元素的整个过程称为“拖”;将被动的元素放置在许可放置的区域上方并释放鼠标左键的行为称为“放”。例如，用户可使用鼠标选择可拖拽（draggable）元素，将元素拖拽到可放置（droppable）元素，并释
2022-06-30 17:08:58
491
原创 HTML5多媒体标签
H5多媒体标签在HTML5之前，如果想在网页上播放音频和视频，则需要安装第三方插件，常用的是 Flash 。使用插件有以下几方面缺点：第一，比较繁琐；第二，容易出现安全性问题；第三，大部分情况下只能在计算机上使用。传统的HTML在播放 HTML5 DOM 为 和 元素提供了方法、属性和事件。这些方法、属性和事件允许使用 JavaScript 来操作 和 元素。下面对这两个标签分别讲解。audio标签（音频播放）本标签主要在页面中加载音频，进行播放，但是播放格式是有限制的。如下表：格式 ..
2022-06-30 16:45:37
735
原创 HTML5自定义属性
传统的HTML中如果想要实现某种样式，可以在标签上添加id、class、或者在标签上添加固有属性，通过CSS中的类选择器、id选择器、属性选择器来实现，在许多UI框架中，例如：bootstrap，可以通过data-[ ]自定义属性，不用写一行js代码，方便了很多。同样在HTML5可以通过data-自定义属性名来给元素添加自定义的属性名。一旦添加完成之后。通过JS可以获取以及设置自定义属性。例如：H5中自定义属性大体可分为两种方式：在代码开始之前先说明一下规范和注意事项下面展示代码：以上就是
2022-06-30 16:20:00
3160
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人