html5学习笔记

最新推荐文章于 2023-02-04 20:54:59 发布

函谷追月

最新推荐文章于 2023-02-04 20:54:59 发布

阅读量156

点赞数

本文链接：https://blog.csdn.net/u014028746/article/details/40216811

版权

这篇博客介绍了HTML5中的关键元素，如文档声明、结构标签的使用，并深入讲解了Canvas API的应用，包括图形绘制、事件处理和颜色操作。通过示例展示了如何利用HTML5的特性创建交互式的网页内容。

摘要由CSDN通过智能技术生成

HTML5

1、文档声明DTD
<!DOCTYPE HTML> 设置文档类型
使得浏览器按照标准模式（w3c标准）渲染网页
否则浏览器按照自定义的怪异模式渲染网页
2、结构标签 <header><section><aside><footer><article>
本质上都是div标签，但是有意义，
3、canvas
凡是路径图形，开始画之前要beginPath 画完要closePath

<fieldset><legend>

<abbr> 定义缩写 The <abbr title="People's Republic of China">PRC</abbr> was founded in 1949.

onblur 事件会在对象失去焦点时发生。
onfocus
href：Hypertext Reference的缩写。意思是超文本引用。 html5 <script>中不再支持
新的 HTML5 全局属性，"contenteditable" 用于：规定元素内容是否是可编辑的。

//API
event.pageX :获取当前位置与浏览器最左侧的距离
event.pageY: 获取当前位置与浏览器最上边的距离
obj.offsetLeft 获取当前对象内当前位置与对象左侧的距离
cxt.clearRect(startX,startY,endX,endY)清理画布中指定的矩形区域
obj.onmousedown obj.onmousemove obj.onmouseup obj.onmouseout 鼠标按下移动抬起离开事件
obj.style.width 设置对象的宽度
cxt.lineWidth 设置绘图环境的笔触宽度
cxt.fillStyle cxt.strokeStyle 设置绘图环境的填充和笔触样式，一般是颜色
canvas.onmousemove = null; //注销到其他动作注册的事件

//colorData=[红,绿,蓝,透明度]，像素信息为三原色的深度，以及透明度
//RGB色彩模式是工业界的一种颜色标准，是通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的
var color = 'rgb('+colorData.data[0]+','+colorData.data[1]+','+colorData.data[2]+')';

var colorData = cxt.getImageData(x,y,1,1);//获取像素信息

//将工具和形状对象放进一个数组中
var t_s = [brush,eraser,paint,straw,text,magnifier,line,arc,arcfill,poly,rectfill,rect];

//data协议