1.HTML5中的Canvas标签的创建
window.onload = function(){ createCanvas(); } function createCanvas(){ var canvas_width= 200, canvas_height = 200; document.body.innerHTML = "<canvas id=\"canvas\" width=\""+canvas_width+"\" height=\""+canvas_height+"\"></canvas>"; }
2.HTML5Canvas标签绘制图形
var canvas_width= 500, canvas_height = 500;var mycanvas, context; window.onload = function(){ createCanvas(); drawRect(); } function createCanvas(){ document.body.innerHTML = "<canvas id=\"mycanvas\" width=\""+canvas_width+"\" height=\""+canvas_height+"\"></canvas>"; mycanvas = document.getElementById("mycanvas"); context = mycanvas.getContext("2d"); } function drawRect(){ context.fillStyle ="#FF0000"; //context.rotate(45);//旋转45度 //context.translate(200,200);//移动 //context.scale(2,0.5);//缩放 context.fillRect(0,0,200,200); }
3.HTML5Canvas标签绘制图片
var canvas_width= 500, canvas_height = 500;var mycanvas, context; window.onload = function(){ createCanvas(); drawImage(); } function createCanvas(){ document.body.innerHTML = "<canvas id=\"mycanvas\" width=\""+canvas_width+"\" height=\""+canvas_height+"\"></canvas>"; mycanvas = document.getElementById("mycanvas"); context = mycanvas.getContext("2d"); } function drawImage(){ var img = new Image(); img.onload = function(){ context.drawImage(img,0,0); } img.src = "1.png"; }
以上就是HTML5 canvas学习的实例介绍的详细内容，更多请关注php中文网其它相关文章！
html5 audio标签在ios 微信浏览器中是无法自动播放的，最近在做一个小的项目遇到这个问题，安卓和pc都是正常的，唯独ios不行，查阅了很多资料，找到了以下方法，也许不是最好用的方法，如果有更方便的方法，尽请留言：
html部分： <audio id="audio"><source src="20161012102044_57fd9dfc044cd.mp3"></audio> <script> audio = document.getElementById('audio'); audio.play(); </script>js部分：
// 函数： function audioAutoPlay(id) { var audio = document.getElementById(id); var play = function() { document.removeEventListener("WeixinJSBridgeReady", play); document.removeEventListener("YixinJSBridgeReady", play); // document.removeEventListener("touchstart", play, false); audio.play(); audio.pause(); }; audio.play(); audio.pause(); //weixin document.addEventListener("WeixinJSBridgeReady", play, false); //yixin document.addEventListener('YixinJSBridgeReady', play, false); //touch document.addEventListener("touchstart", play, false); } //调用： audioAutoPlay('audio1');以上就是ios加载html5 audio标签时遇到的问题分享的详细内容，更多请关注php中文网其它相关文章！
JS 和 a href
在href里面注意分号结尾, 引号闭合
<a href="javascript:;">空链接</a><a href="javascript:alert('a');">弹出</a>
一般不妨代码, 一般让它空着. 空着也可以用井号'#', 但不是很好.
<style>#p1 {width:100px; height:100px; border:1px solid black;}.box {background:red;}</style><script>function toRed() {var oDiv=document.getElementById('p1'); oDiv.className='box'; //不要写成class }</script></head><body><input type="button" value="变红" onclick="toRed()" /><p id="p1">
1. getelementbyId 是和id 相连. 但没有和 class相连的方法.
多层也可以, oDiv['style']['width'] = '40px'
- 什么时候 需要用['']? 函数传参 一般可以传到值上, 有时候要传到属性名称上代表属性, 这时候就要用到['']
JS嵌入的html运行顺序:
-执行事件动作, 执行指向的JS函数, 函数对指定id标签进行修改.
JS嵌入的html代码编写顺序:
-想好更改什么效果, 标注id/class 到指定效果标签, 使用 .或者# 创建{style}, 调用ID编写变更css的逻辑, 用事件函数触发.
以上就是className和a href 的实例详解的详细内容，更多请关注php中文网其它相关文章！
相关文章
精彩导读
热门资讯
关注我们
