2024-08-19

SVG和Canvas都是HTML5中用于绘图的技术,但它们有明显的区别:

  1. SVG基于矢量图,意味着可以无限缩放而不失真。Canvas基于位图,缩放可能导致模糊。
  2. SVG通过DOM操作图形,Canvas通过JavaScript API绘制。
  3. SVG生成的是一个HTML结构,Canvas生成的是一个位图。
  4. SVG对复杂动画支持较差,Canvas支持复杂动画。
  5. SVG通常用于静态内容,Canvas适用于动态内容。

选择SVG还是Canvas,主要取决于你的需求:

  • 如果需要绘制静态或简单动画,且对尺寸没有特别高要求,使用SVG。
  • 如果需要绘制复杂动画或者对性能有要求,使用Canvas。
  • 如果需要在保持分辨率的同时进行缩放,使用SVG。

下面是一个简单的SVG和Canvas绘制同样图形的对比:

SVG代码示例:




<svg width="200" height="200">
  <circle cx="100" cy="100" r="50" stroke="black" fill="red" />
</svg>

Canvas代码示例:




<canvas id="myCanvas" width="200" height="200"></canvas>
<script>
  var canvas = document.getElementById('myCanvas');
  var ctx = canvas.getContext('2d');
  ctx.fillStyle = 'red';
  ctx.beginPath();
  ctx.arc(100, 100, 50, 0, 2 * Math.PI);
  ctx.fill();
</script>
2024-08-19



// 将HTML5 Canvas转换为Blob对象的工具函数
function canvasToBlob(canvas, mimeType, quality, callback) {
    // 使用canvas的toDataURL方法将其转换为data URL
    canvas.toBlob(function(blob) {
        if (blob) {
            callback(blob); // 成功获取到Blob,调用回调函数
        } else {
            throw new Error('Canvas to Blob conversion failed');
        }
    }, mimeType, quality);
}
 
// 使用示例
const canvas = document.getElementById('myCanvas'); // 假设有一个id为'myCanvas'的canvas元素
canvasToBlob(canvas, 'image/png', 1.0, function(blob) {
    // 在这里处理得到的Blob对象,例如使用FormData发送二进制数据
    const formData = new FormData();
    formData.append('file', blob, 'canvas.png');
    // 发送formData到服务器...
});

这个示例代码展示了如何使用canvasToBlob函数将HTML5 Canvas转换为Blob对象。函数接受canvas元素、MIME类型、图片质量以及一个回调函数作为参数,在回调函数中处理转换得到的Blob对象。

2024-08-19

HTML5是HTML的新标准,于2014年正式发布。相较于之前的HTML版本,HTML5提供了大量新的特性和功能,包括音频和视频支持、画布(Canvas)、本地存储、新的表单控件等。

以下是一些HTML5的新增标签:

  1. canvas - 用于绘图和图形处理。
  2. audio - 用于音频内容的播放。
  3. video - 用于视频内容的播放。
  4. nav - 用于导航链接的组合。
  5. header - 表示页面或区域的头部。
  6. footer - 表示页面或区域的底部。
  7. section - 表示文档或应用的一个区块。
  8. article - 表示文章内容。
  9. aside - 表示与页面主内容关联度较低的内容。
  10. input 类型为 emailurlnumberrangedatedatetime-local 等,提供了更加丰富的表单输入控件。

示例代码:




<!DOCTYPE html>
<html>
<head>
    <title>HTML5 示例</title>
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="#">主页</a></li>
                <li><a href="#">关于</a></li>
                <li><a href="#">联系</a></li>
            </ul>
        </nav>
    </header>
    <section>
        <article>
            <h1>文章标题</h1>
            <p>这里是文章内容...</p>
        </article>
        <aside>
            <p>这里是侧边内容...</p>
        </aside>
    </section>
    <footer>
        <p>版权信息</p>
    </footer>
    <audio src="music.mp3" controls></audio>
    <video src="movie.mp4" controls></video>
    <canvas id="myCanvas"></canvas>
    <form>
        <input type="email" name="userEmail" required>
        <input type="submit">
    </form>
    <script>
        var canvas = document.getElementById('myCanvas');
        var ctx = canvas.getContext('2d');
        ctx.fillStyle = '#FF0000';
        ctx.fillRect(0, 0, 150, 75);
    </script>
</body>
</html>

在这个示例中,我们使用了新的语义化标签来构造页面结构,同时也展示了音频和视频的嵌入,画布的使用,以及一些新型的表单输入控件。

2024-08-19



<template>
  <div>
    <grid-layout
      :layout.sync="layout"
      :col-num="12"
      :row-height="30"
      :is-draggable="true"
      :is-resizable="true"
      :vertical-compact="true"
      :margin="[10, 10]"
      :use-css-transforms="true"
    >
      <grid-item
        v-for="item in layout"
        :key="item.i"
        :x="item.x"
        :y="item.y"
        :w="item.w"
        :h="item.h"
        :i="item.i"
      >
        {{ item.i }}
      </grid-item>
    </grid-layout>
  </div>
</template>
 
<script>
import Vue from 'vue';
import VueGridLayout from 'vue-grid-layout';
 
Vue.use(VueGridLayout);
 
export default {
  data() {
    return {
      layout: [
        {"x":0,"y":0,"w":2,"h":2,"i":"0"},
        {"x":2,"y":0,"w":2,"h":4,"i":"1"},
        {"x":4,"y":0,"w":2,"h":5,"i":"2"},
        // ...
      ]
    };
  }
};
</script>

这个代码实例展示了如何在Vue应用中使用vue-grid-layout组件来创建一个栅格布局系统。layout数据属性定义了网格的初始布局配置,其中包含每个网格项的位置、宽度、高度和标识。这个例子简单明了,适合作为学习如何在Vue项目中使用vue-grid-layout的起点。

2024-08-19



<!DOCTYPE html>
<html>
<head>
    <title>FileReader 显示缩略图示例</title>
    <script>
        function previewFile() {
            var preview = document.querySelector('img');
            var file = document.querySelector('input[type=file]').files[0];
            var reader = new FileReader();
 
            reader.onload = function(e) {
                preview.src = e.target.result;
            };
 
            if (file) {
                reader.readAsDataURL(file);
            }
        }
    </script>
</head>
<body>
    <input type="file" onchange="previewFile()">
    <img src="placeholder.png" alt="Image preview..." style="width:100px; height:100px;">
</body>
</html>

这段代码演示了如何使用HTML5的FileReader API来读取用户选择的图片文件,并在网页上显示该图片的缩略图。当用户选择文件后,会触发input元素的onchange事件,然后调用previewFile函数。这个函数创建一个FileReader对象,当文件读取完毕后,会将图片的DataURL设置为img元素的src属性,从而显示图片的缩略图。

2024-08-19

JavaScript 内置函数是语言本身提供的,非常基础且常用的函数。以下是一些常见的 JavaScript 内置函数及其简单示例:

  1. parseInt(string, radix):将字符串转换为整数。如果不能转换,返回 NaNradix 参数定义了要解析的数字的基数。



let num = parseInt("123", 10); // 返回 123
  1. parseFloat(string):将字符串转换为浮点数。如果不能转换,返回 NaN



let num = parseFloat("123.45"); // 返回 123.45
  1. isNaN(value):检查某个值是否是非数字值。如果值是 NaN 或非数字值,返回 true;否则返回 false



let result = isNaN(NaN); // 返回 true
result = isNaN("123"); // 返回 false,因为 "123" 可以转换为数字 123
  1. eval(string):计算字符串参数,并执行它包含的 JavaScript 代码。



let result = eval("1 + 2"); // 返回 3
  1. encodeURI(uri):将字符串编码为 URI。



let uri = encodeURI("https://www.example.com/?query=Hello World");
// 返回 "https://www.example.com/?query=Hello%20World"
  1. decodeURI(uri):将编码的 URI 解码成正常的字符串。



let uri = decodeURI("https%3A%2F%2Fwww.example.com%2F%3Fquery%3DHello%20World");
// 返回 "https://www.example.com/?query=Hello World"
  1. encodeURIComponent(uriComponent):将字符串编码为 URI 组件。



let uriComponent = encodeURIComponent("https://www.example.com/?query=Hello World");
// 返回 "https%3A%2F%2Fwww.example.com%2F%3Fquery%3DHello%20World"
  1. decodeURIComponent(uriComponent):将编码的 URI 组件解码。



let uriComponent = decodeURIComponent("https%3A%2F%2Fwww.example.com%2F%3Fquery%3DHello%20World");
// 返回 "https://www.example.com/?query=Hello World"

这些函数是 JavaScript 中最基本的内置函数,在日常开发中经常使用。

2024-08-19

在HTML5中,可以使用max属性来限制输入字段的最大值。这个属性可以应用于<input>元素的type属性为number的情况。下面是一个例子:




<form>
  <label for="quantity">Enter quantity:</label>
  <input type="number" id="quantity" name="quantity" min="1" max="5">
  <input type="submit">
</form>

在这个例子中,输入字段被限制为从1到5的数字。如果用户尝试输入一个高于5的值,浏览器将不会接受这个值,并可能显示一个警告。

2024-08-19

HTML5提供了拖拽事件,可以用来创建拖拽和放置功能。以下是一个简单的拖拽和放置的例子:




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Drag and Drop Example</title>
<style>
    #draggable {
        width: 150px;
        height: 150px;
        background: red;
        color: white;
        text-align: center;
        line-height: 150px;
        border: 2px dashed #333;
        cursor: move;
        position: absolute;
        top: 50px;
        left: 50px;
    }
 
    #droppable {
        width: 300px;
        height: 300px;
        background: green;
        position: absolute;
        top: 50px;
        left: 250px;
        border: 2px dashed #333;
    }
</style>
</head>
<body>
 
<div id="draggable" draggable="true">Drag me!</div>
<div id="droppable">Drop here!</div>
 
<script>
    const dragItem = document.getElementById('draggable');
    const dropArea = document.getElementById('droppable');
 
    dragItem.addEventListener('dragstart', function(event) {
        event.dataTransfer.setData('text/plain', event.target.id);
    });
 
    dropArea.addEventListener('dragover', function(event) {
        event.preventDefault();
    });
 
    dropArea.addEventListener('drop', function(event) {
        event.preventDefault();
        const data = event.dataTransfer.getData('text/plain');
        event.target.appendChild(document.getElementById(data));
    });
</script>
 
</body>
</html>

在这个例子中,我们创建了两个div元素,一个可以拖动(draggable),另一个可以放置(droppable)。通过JavaScript,我们为可拖动的元素添加了dragstart事件监听器,该监听器在拖动开始时设置要传输的数据(这里是元素的ID)。同时,我们为可放置的元素添加了dragoverdrop事件监听器,分别阻止默认行为并在放置时将拖动的元素添加为子元素。

2024-08-19

HTML5废除的元素主要是那些不再被推荐使用的元素。这些元素仍然可以在现代浏览器中使用,但是可能在未来的HTML标准中被彻底移除。

以下是一些HTML5废除的元素:

  1. acronym - 使用 abbr 代替。
  2. applet - 用于嵌入Java小程序,现在基本不再使用。
  3. basefont - 用于定义基准字体大小,不推荐使用。
  4. big - 用于放大文本,可以用CSS替代。
  5. center - 文本居中,可以用CSS替代。
  6. dir - 列出目录列表,可以用UL或OL代替。
  7. font - 定义文本字体、大小、颜色,可以用CSS替代。
  8. frame - 使用 iframe 代替。
  9. frameset - 使用CSS布局代替。
  10. isindex - 用于客户端表单的一种方式,不推荐使用。
  11. noframes - 包含无法显示时的替代内容。
  12. s - 表示不再重要的文本,用CSS替代。
  13. strike - 表示删除线文本,用CSS替代。
  14. tt - 等宽字体文本,用CSS替代。
  15. u - 下划线文本,用CSS替代。

示例代码:




<!-- 旧的元素使用 -->
<acronym title="World Wide Web">WWW</acronym>
<basefont color="red">This text will be red</basefont>
<big>This text is big</big>
<center>This text is centered</center>
<dir>
  <li>Item 1</li>
  <li>Item 2</li>
</dir>
<font size="5" color="blue">This is blue text</font>
<frame src="content.html">
<frameset cols="25%,75%">
  <frame src="navigation.html">
  <frame src="content.html">
</frameset>
<isindex prompt="Enter search:">
<noframes>
  Your browser does not support frames.
</noframes>
<s>This text is no longer correct</s>
<strike>This text is striked through</strike>
<tt>This is monospaced text</tt>
<u>This text is underlined</u>
 
<!-- 新的替代方案 -->
<abbr title="World Wide Web">WWW</abbr>
<p style="color: red;">This text will be red</p>
<span style="font-size: larger;">This text is big</span>
<div style="text-align: center;">This text is centered</div>
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>
<p style="font-size: 24px; color: blue;">This is blue text</p>
<!-- iframe 替代 frame 和 frameset -->
<iframe src="content.html" width="100%" height="100%">
  Your browser does not support iframes.
</iframe>
<!-- 使用JavaScript或服务器端检索 -->
<!-- 使用CSS替代u, strike, s, tt等元素 -->

在实际开发中,应该尽量避免使用废弃的元素,以保证代码的兼容性和可维护性。

2024-08-19

HTML5引入了一些新的表单输入类型,以及一些新的表单元素属性,以简化表单的创建和验证过程。以下是一些常见的HTML5新增表单input属性:

  1. placeholder - 提供输入字段的提示(hint),用户输入时消失。
  2. required - 表示输入字段是必填的,如果为空则表单不能提交。
  3. pattern - 定义输入字段的验证模式,用于检查输入值是否符合正则表达式。
  4. minmax - 对于数值输入,设置最小值和最大值。
  5. step - 对于数值输入,设置每次改变时的步长。
  6. multiple - 允许输入字段接收多个文件。
  7. email - 限制输入为电子邮件格式。
  8. url - 限制输入为URL格式。
  9. date - 选择日期。
  10. time - 选择时间。
  11. number - 为输入设置为数值类型。
  12. search - 用于搜索框。

示例代码:




<form>
  <label for="username">用户名:</label>
  <input type="text" id="username" name="username" required>
 
  <label for="email">电子邮件:</label>
  <input type="email" id="email" name="email" required>
 
  <label for="birthday">生日:</label>
  <input type="date" id="birthday" name="birthday">
 
  <input type="submit">
</form>

在这个例子中,我们创建了一个简单的表单,包含了几个HTML5的新属性:required用于确保字段不为空,email用于验证电子邮件地址的格式,以及date类型用于选择日期。