canvas入门 & HTML5 Web 存储入门

最新推荐文章于 2022-03-08 09:56:52 发布

只要你在

最新推荐文章于 2022-03-08 09:56:52 发布

阅读量103

点赞数

分类专栏： html5

本文链接：https://blog.csdn.net/icebergliu1234/article/details/83051303

版权

html5 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。

HTML5的设计目的是为了在移动设备上支持多媒体。

最基本的：

<!DOCTYPE html>

<html>

<head>

<title>菜鸟教程(runoob.com)</title>

</head>

<body>

<h1>我的第一个标题</h1>

<p>我的第一个段落。</p>

</body>

</html>

canvas：

<!DOCTYPE html>

<html>

<head>

<title>菜鸟教程(runoob.com)</title>

</head>

<body>

您的浏览器不支持 HTML5 canvas 标签。

</canvas>

<!canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：>

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.fillStyle="#FF0000";

ctx.fillRect(0,0,150,25);

</script>

</body>

</html>

======================

<!画一条线：>

ctx.moveTo(0,0);

ctx.lineTo(200,100);

ctx.stroke();

=========================

<!画一个圆>

ctx.beginPath(); ctx.arc(95,50,40,0,2*Math.PI); ctx.stroke();

=====================

<!写几个字>

ctx.font="30px Arial";

ctx.fillText("Hello World",10,50);

========

渐变：

createLinearGradient(x,y,x1,y1) - 创建线条渐变
createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变

// 创建渐变 var grd=ctx.createLinearGradient(0,0,200,0); grd.addColorStop(0,"red"); grd.addColorStop(1,"white"); // 填充渐变 ctx.fillStyle=grd; ctx.fillRect(10,10,150,80);

===============

// 创建渐变 var grd=ctx.createRadialGradient(75,50,5,90,60,100); grd.addColorStop(0,"red"); grd.addColorStop(1,"white"); // 填充渐变 ctx.fillStyle=grd; ctx.fillRect(10,10,150,80);

=================

HTML5 Web 存储

localStorage 和 sessionStorage

客户端存储数据的两个对象为：

localStorage - 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。
sessionStorage - 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

在使用 web 存储前,应检查浏览器是否支持 localStorage 和sessionStorage:

if(typeof(Storage)!=="undefined") { // 是的! 支持 localStorage sessionStorage 对象! localStorage.sitename="菜鸟教程";

document.getElementById("result").innerHTML="网站名：" + localStorage.sitename; } else { // 抱歉! 不支持 web 存储。 }

解析：

使用 key="sitename" 和 value="菜鸟教程" 创建一个 localStorage 键/值对。
检索键值为"sitename" 的值然后将数据插入 id="result"的元素中。

移除 localStorage 中的 ""sitename" :

localStorage.removeItem(""sitename");

==========

Eg：

<!DOCTYPE html>

<html>

<head>

<title>菜鸟教程(runoob.com)</title>

function clickCounter()

{

if(typeof(Storage)!=="undefined")

{

if (localStorage.clickcount)

{

localStorage.clickcount=Number(localStorage.clickcount)+1;

}

else

{

localStorage.clickcount=1;

}

document.getElementById("result").innerHTML=" 你已经点击了按钮 " + localStorage.clickcount + " 次 ";

}

else

{

document.getElementById("result").innerHTML="对不起，您的浏览器不支持 web 存储。";

}

</script>

</head>

<body>

<p>点击该按钮查看计数器的增加。</p>

<p>关闭浏览器选项卡(或窗口),重新打开此页面,计数器将继续计数(不是重置)。</p>

</body>

</html>

======

localStorage与 sessionStorage，可使用的API都相同，常用的有如下几个（以localStorage为例）：

保存数据：localStorage.setItem(key,value);
读取数据：localStorage.getItem(key);
删除单个数据：localStorage.removeItem(key);
删除所有数据：localStorage.clear();
得到某个索引的key：localStorage.key(index);

详见：http://www.runoob.com/html/html5-webstorage.html

只要你在

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas入门 & HTML5 Web 存储入门

HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。HTML5的设计目的是为了在移动设备上支持多媒体。最基本的：&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="utf-8"&gt;&lt;title&gt;菜鸟教程(runoob.com)&lt;/ti..
复制链接

扫一扫