HTML5、canvas绘图、cookie

最新推荐文章于 2025-06-03 20:36:13 发布

烽火丶丶丶

最新推荐文章于 2025-06-03 20:36:13 发布

阅读量234

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_42481626/article/details/94737574

本文详细介绍了HTML5的特性及其与CSS3的兼容性，重点讲解了Canvas元素的使用，包括画布的创建、绘图上下文的设置、基本图形的绘制以及图像的插入。同时，文章还探讨了Cookie的创建、读取和删除方法，以及其在存储用户信息中的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html5

HTML5是HTML的第五次更新，由W3C 与 WHATWG 合作的结果。
HTML5完全支持css3；
HTML5新元素：canvas元素;
HTML5多媒体： ;
HTML5一些应用：本地数据存储，访问本地文件，本地 SQL 数据，缓存引用；
HTML5图形：canvas绘图；

canvas绘图：

首先要新建一个canvas画布，注意画布的宽高要在标签中设置，

<canvas id="canvas" width=“600 height=“600””></canvas>

然后要获取到画布；

 var canvas = document.querySelector("#canvas");

将canvas转化为2d模型

var content = canvas.getContext("2d");

填充：fillstyle；
描边：strokeStyle；
下面绘制一个矩形：

  content.fillStyle = "red";
  content.fillRect(0,0,200,100);
  content.fill();

canvas中插入十张图片；

 var image=new Image();
    image.src="./img/map.jpg";
    image.onload=function(){
        for(var i=0;i<10;i++){
            content.drawImage(image,i*100,i*100,100,100);

        }
    };

cookie

Cookie 用于存储 web 页面的用户信息。
Cookie 的作用就是用于解决 “如何记录客户端的用户信息”；
当用户访问 web 页面时，他的名字可以记录在 cookie 中。
在用户下一次访问该页面时，可以在 cookie 中读取用户访问记录。

使用 JavaScript 创建Cookie

JavaScript 可以使用 document.cookie 属性来创建、读取、及删除 cookie。

JavaScript 中，创建 cookie 如下：

document.cookie="username=John Doe";

使用 JavaScript 读取 Cookie

在 JavaScript 中, 可以使用以下代码来读取 cookie：

var x = document.cookie;

使用 JavaScript 修改 Cookie

在 JavaScript 中，修改 cookie 类似于创建 cookie，如下：

document.cookie="username=John Smith; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

旧的 cookie 将被覆盖。

使用 JavaScript 删除 Cookie

删除 cookie 非常简单。您只需要设置 expires 参数为以前的时间即可，如下：

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

注意，当您删除时不必指定 cookie 的值。