HTML5必拿下
文章平均质量分 76
℡啨天丶
前端开发工程师
展开
-
SVG文本及图片引用
属性说明xlink:href定义到资源的链接作为引用URL。最新规范已经被href属性取代了。距离起始位置的偏移量。原创 2022-10-15 15:55:48 · 844 阅读 · 1 评论 -
viewport和viewBox 下边对齐
世界可以是无限大,你想让它多大就多大,可以在上面绘制很多东西。但是世界上的所有东西都能被页面看到(视野只能看到视野所看到的部分)被页面看到的部分是视野。视野是可以移动的(类似于截图模式)在 svg中的宽和高(相当于全屏模式)原创 2022-10-15 15:26:39 · 262 阅读 · 0 评论 -
SVG 矩形、圆形、椭圆、线、折线和多边形的绘制
制作整理不易,以上内容均为原创(参考了部分官方文档和老师整理的案例)。如要引用请附上本文链接,如有疑问可以在评论区畅所欲言,作者看到会第一时间回复,欢迎交流!原创 2022-10-15 11:26:55 · 925 阅读 · 0 评论 -
SVG的简介
矢量图是通过多个对象的组合生成的,对其中的每一个对象的纪录方式,都是以数学函数来实现的,也就是说,矢量图实际上并不是象位图那样纪录画面上每一点的信息,而是纪录了元素形状及颜色的算法,当你打开一付矢量图的时候,软件对图形象对应的函数进行运算,将运算结果[图形的形状和颜色]显示给你看。构成位图的最小单位是象素,位图就是由象素阵列的排列来实现其显示效果的,每个象素有自己的颜色信息,在对位图图像进行编辑操作的时候,可操作的对象是每个象素,我们可以改变图像的色相、饱和度、明度,从而改变图像的显示效果。原创 2022-10-15 11:10:32 · 616 阅读 · 0 评论 -
canvas绘制地球围绕太阳转、月球围绕地球转
制作整理不易,以上内容均为原创(参考了部分官方文档和老师整理的案例)。如要引用请附上本文链接,如有疑问可以在评论区畅所欲言,作者看到会第一时间回复,欢迎交流!原创 2022-08-08 12:53:00 · 563 阅读 · 0 评论 -
canvas像素操作、save与restore、合成与变形
如要引用请附上本文链接,如有疑问可以在评论区畅所欲言,作者看到会第一时间回复,欢迎交流!:Canvas状态存储在栈中,每当save()方法被调用后,当前的状态就被推送到栈中保存。:每一次调用 restore 方法,上一个保存的状态就从栈中弹出,所有设定都恢复。(类似数组的pop())其中宽高分别为获取图像宽高时的大小,data则存放的是在该大小内所有的像素点的详细信息。注意:创建一个ImageData对象,默认创建出来的是个透明的。第三部:书写点击事件函数,获取A画布内容,渲染到B画布中。...原创 2022-08-08 12:46:55 · 665 阅读 · 0 评论 -
canvas圆弧、椭圆、贝塞尔曲线、文本、对齐方式、绘制图片及切图案例
制作整理不易,以上内容均为原创(参考了部分官方文档和老师整理的案例)。如要引用请附上本文链接,如有疑问可以在评论区畅所欲言,作者看到会第一时间回复,欢迎交流!方法返回一个 TextMetrics 对象,包含关于文本尺寸的信息(例如文本的宽度)当前我们用来绘制文本的样式. 这个字符串使用和 CSS font 属性相同的语法.文本对齐选项. 可选的值包括: left, right center.dx,dy,dw,dh:定义切片的目标显示位置和大小。sx,sy,sw,sh:源图像切片位置和大小。......原创 2022-08-08 12:20:32 · 942 阅读 · 0 评论 -
Html5 canvas绘制折线、使用线性渐变、径向渐变和lineJoin,lineCap属性
想了解更全面的canvas API可以点击右侧: canvas简介及常用APIcanvas使用透明度(globalAlpha)canvas使用线性渐变createLinearGradientcanvas使用径向渐变createRadialGradientcanvas使用lineJoin属性canvas使用lineCap属性......原创 2022-08-08 11:54:34 · 379 阅读 · 0 评论 -
html5 canvas绘制图形和线段
canvas 标签在页面只显示一个设定背景颜色画布,如果需要需要产生新内容或者进行画图操作,需要借助canvas API(HTML5 的内置对象context)和JavaScript操作实现画图或者其他图像操作。制作整理不易,以上内容均为原创(参考了部分官方文档和老师整理的案例)。如要引用请附上本文链接,如有疑问可以在评论区畅所欲言,作者看到会第一时间回复,欢迎交流!通常来说网格中的一个单元相当于canvas元素中的一像素。想了解更全面的canvas API可以点击右侧: canvas简介及常用API。..原创 2022-08-08 09:45:09 · 325 阅读 · 0 评论 -
canvas简介和常用的API
目录canvas简介canvas和SVG的区别canvas APIcanvas主要属性与方法颜色、样式和阴影的属性颜色、样式和阴影的方法线条样式矩形方法路径方法转换绘制图像、合成像素操作canvas简介是 HTML5 新增的,一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素。它可以绘制 图形(矩形、曲线、圆)、图表、动画、游戏开发等。有些浏览器不支持canvas,要想有良好的用户体验,可以在canvas标..原创 2022-07-03 10:16:23 · 230 阅读 · 0 评论 -
HTML5拖放API使用及小案例实现
H5拖放API使用及小案例实现H5拖放APIHTML5定义的拖放指的是用户可以使用鼠标左键点击选中允许拖放的元素或文件,在保持鼠标左键按下的情况下可以移动该元素至页面的任意位置,并且在移动到处于具有允许放置状态的元素上释放鼠标左键放置被拖放的元素。其中从鼠标左键按下选中元素,到保持鼠标左键按下并移动该元素的整个过程称为“拖”;将被动的元素放置在许可放置的区域上方并释放鼠标左键的行为称为“放”。例如,用户可使用鼠标选择可拖拽(draggable)元素,将元素拖拽到可放置(droppable)元素,并释原创 2022-06-30 17:08:58 · 473 阅读 · 0 评论 -
HTML5多媒体标签
H5多媒体标签在HTML5之前,如果想在网页上播放音频和视频,则需要安装第三方插件,常用的是 Flash 。使用插件有以下几方面缺点:第一,比较繁琐;第二,容易出现安全性问题;第三,大部分情况下只能在计算机上使用。传统的HTML在播放 HTML5 DOM 为 和 元素提供了方法、属性和事件。这些方法、属性和事件允许使用 JavaScript 来操作 和 元素。下面对这两个标签分别讲解。audio标签(音频播放)本标签主要在页面中加载音频,进行播放,但是播放格式是有限制的。如下表:格式 ..原创 2022-06-30 16:45:37 · 710 阅读 · 0 评论 -
HTML5自定义属性
传统的HTML中如果想要实现某种样式,可以在标签上添加id、class、或者在标签上添加固有属性,通过CSS中的类选择器、id选择器、属性选择器来实现,在许多UI框架中,例如:bootstrap,可以通过data-[ ]自定义属性,不用写一行js代码,方便了很多。同样在HTML5可以通过data-自定义属性名来给元素添加自定义的属性名。一旦添加完成之后。通过JS可以获取以及设置自定义属性。例如:H5中自定义属性大体可分为两种方式:在代码开始之前先说明一下规范和注意事项下面展示代码:以上就是原创 2022-06-30 16:20:00 · 3113 阅读 · 0 评论