JS DOM编程艺术——HTML5—— JS学习笔记2015-7-24(第91天)

HTML5的vedio和audio元素,二者的兼容性目前不少很好,所以在写的时候要考虑到备用方案;

HTML5表单元素:email, url , data, number, range, search, tel, color

下面再放一个canvas的小实例:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>canvas小实例</title>
</head>

<body>

<canvas id="draw-in-me" width="120" heigt="40">
<p>Powered By HTML5 canvas</p>
</canvas>
<script>
 function draw(){
     var canvas = document.getElementById(‘draw-in-me‘);
     if(canvas.getContext){
         var ctx = canvas.getContext(‘2d‘);
         ctx.beginPath();
         ctx.moveTo(120.0,32.0);
         ctx.bezierCurveTo(120.0, 36.4, 116.4, 40.0, 112.0, 40.0);
         ctx.lineTo(8.0, 40.0);
         ctx.bezierCurveTo(3.6, 40.0, 0.0, 36.4, 0.0, 32.0);
         ctx.lineTo(0.0, 8.0);
         ctx.bezierCurveTo(0.0, 3.6, 3.6, 0.0, 8.0, 0.0);
         ctx.lineTo(112.0, 0.0);
         ctx.bezierCurveTo(116.4, 0.0, 120.0, 3.6, 120.0, 8.0);
         ctx.lineTo(120.0, 32.0);
         ctx.closePath();
         ctx.fill();
         ctx.lineWidth = 2.0;
         ctx.strokeStyle = "rgb(255, 255, 255)";
         ctx.stroke();

     }
 }

 draw();

</script>
</body>
</html>

时间: 2024-08-04 14:27:34

JS DOM编程艺术——HTML5—— JS学习笔记2015-7-24(第91天)的相关文章

JS DOM编程艺术——用JS实现动画效果—— JS学习笔记2015-7-21(第88天)

moveElement函数 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>用定时器实现JS动画效果</title> <style> </style> </head> <body> <

JS DOM编程艺术——CSS-DOM—— JS学习笔记2015-7-19(第87天)

DOM的style属性提取不到外部样式表和头部<style></style>标签里面设置的样式 解决方法是用DOM 设置样式,再可以用DOM把他们检索出来. 但是style属性是可以设置的,通过赋值来更新样式

JS DOM编程艺术——用JS实现动画效果—— JS学习笔记2015-7-22(第89天)

实用的动画效果: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>实用的动画效果</title> <style> #slideshow{ width: 100px; height: 100px; position: rela

JS DOM编程艺术——setAttribute—— JS学习笔记2015-7-7(第78天)

getAttribute & setAttribute 获取和设置属性 getAttribute 获取属性: 语法:object.getAttribute(attribute);   这个方法不属于document对象,所以不能使用document对象调用,只能通过元素节点对象调用:后面的setAttribute也是这样: 比如:var paras = document.getElementsByTagName('p'); alert(paras[0].getAttribute('title')

JS DOM编程艺术的学习—— JS学习笔记2015-7-5(第76天)

由于看高程3卡住了,所以现在在学习JS DOM编程艺术来巩固基础: 一.在看JS DOM 编程艺术的时候,有个作者提到的方法很实用, 就是在JS中变量和函数的命名方法:  变量的命名方法为使用下划线,比如: var temp_color = ['red','blue']; 函数就使用驼峰法,比如: function current_date(){}; 这样的习惯可以帮助理解,提高可读性,在理解变量和函数名的时候就很方便了: 二.还有个收获就是关于“对象”的理解又加深了 之前对于什么对象的属性,对

JS DOM编程艺术——JS图片库—— JS学习笔记2015-7-8(第79天)

DOM是一种适用于多种环境和多种程序设计语言的通用型API. 如果想要把本书(JS DOM编程艺术)学到的DOM技巧运用在web浏览器以外的应用环境里,严格遵守“第1级DOM”能够让你避免与兼容性有关的任何问题: tips:setAttribute是第1级DOM; 图片切换初级js: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/

JS DOM 编程艺术 随笔

DOM 最大的作用就是将整个文档通过节点树来展现.通过类似方法可以获取特定节点,并绑定js方法实现与人的交互. 1.通过dom方法,获取页面的元素(getElementsByTagName/id,通过class(getAttribute))2.获取元素之后,为他们绑定行为(点击/其他)的处理事件3.最后把所有函数绑定到window.onload()函数上面去 onload = function(){function1function2...} plus 小技巧: <a onclick=>函数

&lt;书摘&gt;《JS DOM编程艺术》

2016/03/04 12:00 第一二章:JS的简史以及基本语法 1.P11 2.variable 3.P13 等于 4.P13 5.P14 转义字符 6.关联数组不是一个好习惯 7.P18 对象 8.P31  firefox和chrome的兼容性:+1900,IE好着呢: 第三章:强大的DOM编程 1.DOM:Document Object Model OR MAP(文档,对象,模型OR地图): 2.P40 中间 [请注意] 3.p42 上部分例子 4.案例研究:JavaScript图片库(

JS DOM编程艺术——动态创建标记—— JS学习笔记2015-7-13(第83天)

DOM方法: 1.createElement 语法:document.createElement(nodeName) 比如:document.createElement("p");  // 将创建一个P元素: 2.appendChild 语法:parent.appendChild(child) 3.creatTextNode 语法:document.createTextNode(text) example.js /* window.onload = function (){ var p