HTML5 笔记一

最新推荐文章于 2024-06-14 11:39:10 发布

B-Candy

最新推荐文章于 2024-06-14 11:39:10 发布

阅读量83

点赞数

分类专栏： HTML5 文章标签： html5

本文链接：https://blog.csdn.net/bomiaomiao/article/details/51822888

版权

HTML5 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

兼容性

1、为了能让旧版本浏览器能正确显示html5新增元素，可以设置css样式。

header, section, footer, aside, nav, main, article, figure {
    display: block; 
}

2、为IE浏览器添加新的标签：

<script>document.createElement("myHero")</script>

3、针对IE浏览器，html5shiv是最好的解决方案。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>渲染 HTML5</title>
  <!--[if lt IE 9]>
  <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
  <![endif]-->
</head>
<body>
<h1>我的第一篇文章</h1>
<article>
菜鸟教程 —— 学的不仅是技术，更是梦想！！！
</article>
</body>
</html>

新元素

这里写图片描述

<canvas>：定义图形，比如图表和其他图像，必须使用脚本来绘制图形。
创建一个画布。一个画布在网页中是一个矩形框，通过<canvas> 绘制。

<canvas id="myCanvas" width="200" height="100"></canvas>

JavaScript绘制图像

首先，找到canvas元素。var c=getElementById("myCanvas");
其次，创建context对象。var ctx=c.getContext("2d");
最后，绘制图像。

坐标
canvas是一个二维网格。左上角坐标（0，0）
绘制一个矩形：fillRect(x,y,width,height)
这里写图片描述

画线
moveTo(x,y):定义线条开始坐标；
lineTo(x,y)定义线条结束坐标；
然后使用stroke()方法绘制线条；

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();

绘制圆形arc(x,y,r,start,stop)

文本
font - 定义字体
fillText(text,x,y) - 在 canvas 上绘制实心的文本
strokeText(text,x,y) - 在 canvas 上绘制空心的文本

渐变
createLinearGradient(x0,y0,x1,y1) - 创建线条渐变

这里写图片描述

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

这里写图片描述

图像
drawImage(image,x,y)
这里写图片描述

B-Candy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5 笔记一

兼容性1、为了能让旧版本浏览器能正确显示html5新增元素，可以设置css样式。header, section, footer, aside, nav, main, article, figure { display: block; }2、为IE浏览器添加新的标签：<script>document.createElement("myHero")</script>3、针对IE浏览器，html
复制链接

扫一扫