H5学习
文章平均质量分 87
么贺贵
it民工
展开
-
SVG文本及图片引用
文本text定义文本 / tspan 定义分组文本属性说明x,y可选,文本起始位置坐标。dx可选,文本在水平方向上的偏移量。dy可选,文本在垂直方向上的偏移量。text-anchor可选,设置文本对齐方向。可能值是start(默认),middle,end。textLength可选,设置文本总长度。lengthAdjust可选,设置文本拉伸或压缩。可能值是 spacing(默认)和spacingAndGlyphs。rotate可选,设置原创 2021-06-30 21:07:13 · 697 阅读 · 0 评论 -
SVG中path标签的简单使用
path标签概述他是由命令及其参数组组成的字符串,如:<path d="M0,0L10,20C30-10,40,20,100,100" stroke="red">命名规范区分大小写:大写表示坐标参数为绝对位置,小写则为相对位置最后的参数表示最终要到达的位置上一个命令结束的位置就是下一个命令开始的位置命令可以重复参数表示重复执行同一条命令命令简介M (x, y)+ 移动画笔,后面如果有重复参数,会当做是 L 命令处理L (x, y)+ 绘制直线到指定位置H (x)+原创 2021-06-30 18:42:17 · 5796 阅读 · 0 评论 -
SVG坐标系及样式
一、SVG名词解释画布(世界)世界可以是无限大,你想让它多大就多大,可以在上面绘制很多东西。但是世界上的所有东西都能被页面看到(视野只能看到视野所看到的部分)视野被页面看到的部分是视野。视野是可以移动的(类似于截图模式)视窗在 svg中的宽和高(相当于全屏模式)二、SVG viewBoxviewBox属性允许指定一个给定的一组图形伸展以适应特定的容器元素viewBox属性的值是一个包含4个参数的列表 min-x, min-y, width and height, 以空格或者逗号分隔开原创 2021-06-26 17:46:44 · 415 阅读 · 0 评论 -
SVG 矩形、圆形、椭圆、线、折线和多边形的绘制
一、矩形 < rect >xywidthheightrxry<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #svg-wrap { /* svg与canvas不用,svg可以使用css和行内样式设置宽高。 *原创 2021-06-26 11:27:49 · 2451 阅读 · 0 评论 -
SVG的简介
一、SVG是什么指可伸缩矢量图形 (Scalable Vector Graphics)用来定义用于网络的基于矢量的图形使用 XML 格式定义图形图像在放大或改变尺寸的情况下其图形质量不会有所损失是万维网联盟的标准与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体二、SVG支持的版本如下(详细版本):三、位图与矢量图的区别位图[bitmap],也叫做点阵图,删格图象,像素图,简单的说,就是最小单位由象素构成的图,缩放会失真。构成位图的最小单位是象素,位图就是由象素阵列的排列来实原创 2021-06-26 11:05:14 · 605 阅读 · 0 评论 -
canvas绘制地球围绕太阳转、月球围绕地球转
素材(放到img中,与html同级):太阳地球月亮<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> body { background-color: #99CCFF; } #canvas { background-color:原创 2021-06-23 20:16:52 · 874 阅读 · 0 评论 -
canvas像素操作、save与restore、合成与变形
一、canvas像素操作(1)获取图像像素imageData = ctx.getImageData(x,y,w,h)imageData 对象 width height datagetImageData返回 ImageData 对象,该对象拷贝了画布指定矩形的像素数据获取图像像素后的imageData中包含三项:其中宽高分别为获取图像宽高时的大小,data则存放的是在该大小内所有的像素点的详细信息。data是一个数组,每四位秒数一个像素点,分别代表rgba。例如原创 2021-06-21 20:00:34 · 546 阅读 · 1 评论 -
canvas圆弧、椭圆、贝塞尔曲线、文本、对齐方式、绘制图片及切图案例
想了解更全面的canvas API可以点击右侧: canvas简介及常用APIcanvas绘制圆弧arc(x, y, r, startAngle, endAngle, anticlockwise)x,y为圆心的坐标radius 为圆形的半径startAngle 为弧度的起始位置,0是正x轴的endAngle 为弧度的终点位置,anticlockwise 布尔值,true为逆时针绘制,false为顺时针绘制<script type="text/javascript">原创 2021-06-20 13:01:00 · 968 阅读 · 1 评论 -
canvas绘制折线、使用线性渐变、径向渐变和lineJoin,lineCap属性
想了解更全面的canvas API可以点击右侧: canvas简介及常用APIcanvas绘制折线<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> body { background-color: #99CCFF; } #canvas {原创 2021-06-20 12:35:27 · 657 阅读 · 0 评论 -
canvas小案例绘制图形和线段
canvas小案例绘制图形和线段想了解更全面的canvas API可以点击右侧: canvas简介及常用APIcanvas绘制图形样例:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> body { background-color: #99CCFF;原创 2021-06-20 11:46:35 · 133 阅读 · 0 评论 -
canvas简介及常用API
canvas简介 是 HTML5 新增的,一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素。它可以绘制 图形(矩形、曲线、圆)、图表、动画、游戏开发等。有些浏览器不支持canvas,要想有良好的用户体验,可以在canvas标签中填写替换内容。比如:您的浏览器不支持canvas。这样canvas不能正常渲染的时候,就会出现替代内容。以下是支持 元素的第一个浏览器版本号。GoogleIEFirefoxSafariOpera4.09.02.原创 2021-06-20 11:44:53 · 241 阅读 · 0 评论 -
H5拖放API使用及小案例实现
H5拖放API使用及小案例实现H5拖放APIHTML5定义的拖放指的是用户可以使用鼠标左键点击选中允许拖放的元素或文件,在保持鼠标左键按下的情况下可以移动该元素至页面的任意位置,并且在移动到处于具有允许放置状态的元素上释放鼠标左键放置被拖放的元素。其中从鼠标左键按下选中元素,到保持鼠标左键按下并移动该元素的整个过程称为“拖”;将被动的元素放置在许可放置的区域上方并释放鼠标左键的行为称为“放”。例如,用户可使用鼠标选择可拖拽(draggable)元素,将元素拖拽到可放置(droppable)元素,并释放鼠原创 2021-06-09 21:09:52 · 543 阅读 · 0 评论 -
H5多媒体标签
H5多媒体标签在 HTML5 之前,如果想在网页上播放音频和视频,则需要安装第三方插件,常用的是 Flash 。使用插件有以下几方面缺点:第一,比较繁琐;第二,容易出现安全性问题;第三,大部分情况下只能在计算机上使用。传统的HTML在播放 HTML5 DOM 为 和 元素提供了方法、属性和事件。这些方法、属性和事件允许使用 JavaScript 来操作 和 元素。下面对这两个标签分别讲解。audio标签(音频播放)本标签主要在页面中加载音频,进行播放,但是播放格式是有限制的。如下表:原创 2021-06-04 13:37:51 · 427 阅读 · 0 评论 -
H5自定义属性
**H5自定义属性**H5自定义属性传统的HTML中如果想要实现某种样式,可以在标签上添加id、class、或者在标签上添加固有属性,通过CSS中的类选择器、id选择器、属性选择器来实现,在许多UI框架中,例如:bootstrap,可以通过data-[ ]自定义属性,不用写一行js代码,方便了很多。同样在HTML5可以通过data-自定义属性名来给元素添加自定义的属性名。一旦添加完成之后。通过JS可以获取以及设置自定义属性。例如:<div data-sup= "thisData" id =原创 2021-06-04 08:55:47 · 419 阅读 · 0 评论