随笔分类 -  HTML 5

1 2 下一页
webwork
摘要：代码结构，html页面引入两个js文件，work.js和main.js work.js main.js 效果：控制台输出 1 原理解释： 首先main中引入一个js文件，并向其发送数据（postMessage），目标文件获取数据（onmessage）,(数据保存在e.data里)，处理数据后又把数据 阅读全文
posted @ 2016-11-28 09:47 晨落梦公子 阅读(1673) 评论(0) 推荐(0)
拖拽
摘要：一，拖拽浏览器本身元素 二，拖拽外部文件到浏览器 阅读全文
posted @ 2016-10-15 10:12 晨落梦公子 阅读(182) 评论(0) 推荐(0)
canvas实现钟表
摘要：效果图： 阅读全文
posted @ 2016-10-14 17:56 晨落梦公子 阅读(190) 评论(0) 推荐(0)
canvas打开本机摄像头
摘要：1 (function () { 2 3 var video = document.createElement("video"); 4 video.autoplay="autoplay"; 5 document.body.appendChild(video); 6 7 function init() { 8 navigator.... 阅读全文
posted @ 2016-10-10 21:18 晨落梦公子 阅读(933) 评论(0) 推荐(0)
canvas实现音乐中的歌词播放效果
摘要：1 2 3 4 5 Title 6 11 12 13 14 15 16 1 (function () { 2 3 var curX = -400, speed = 1; 4 var text = "Hello World"; 5 var canvas = document.getElementByI... 阅读全文
posted @ 2016-10-10 21:11 晨落梦公子 阅读(1175) 评论(0) 推荐(0)
canvas调节视频颜色
摘要：1 2 3 4 5 Title 6 7 8 9 10 11 1 (function () { 2 var videoWidth = 320; 3 var videoHeight = 240; 4 var canvas = document.getElementById("canvas"); 5 v... 阅读全文
posted @ 2016-10-10 21:10 晨落梦公子 阅读(334) 评论(0) 推荐(0)
clip API实现遮罩
摘要：1 (function () { 2 3 var img; 4 var canvas = document.getElementById("canvas"); 5 var con = canvas.getContext("2d"); 6 var circleX = 0, circleY = 100, speed = 1; 7 8 fun... 阅读全文
posted @ 2016-10-10 21:08 晨落梦公子 阅读(208) 评论(0) 推荐(0)
canvas drawImage异步特性
摘要：先看代码： 代码的效用是实现剪切一块图片放到指定位置。 但是上面的代码有一个问题，就是浏览器并不是每次刷新，图片都能正常剪切，只是偶尔成功，这就是因为异步。 解决此问题 这就行了，（吐槽：每次都刷新，还不信你不出来，异步我也得把你整出来。。 ） 阅读全文
posted @ 2016-10-10 20:35 晨落梦公子 阅读(3229) 评论(0) 推荐(0)
canvas实现绘画
摘要：html代码: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 * { 8 margin: 0; 9 padding: 0; 10 } 阅读全文
posted @ 2016-09-19 19:06 晨落梦公子 阅读(759) 评论(0) 推荐(0)
HTML基础知识
摘要：1、w3c标准：HTML:结构 CSS:表现 JS:行为 2、HTTP:Hyper Text Transfer Protocol 超文本传输协议 3、HTML:Hyper Text Markup Language 超文本标记语言 4、H5声明：<!Doctype html> 5、标准属性：每个元素都 阅读全文
posted @ 2016-07-11 17:30 晨落梦公子 阅读(135) 评论(0) 推荐(0)
html中插入css和js
摘要：插入css: HTML周明华添加css样式的方法有很多种，常见的有一下几种：、 1、直接标签后添加如： 2、直接在同一文档如： 3、最常见，实际开发中用的是外联样式表，即把css样式单独写以文件中，HTML中引用该文件即可如： 阅读全文
posted @ 2016-03-14 20:53 晨落梦公子 阅读(958) 评论(0) 推荐(0)
canvas阴影
摘要：代码： 1 /** 2 * Created by Administrator on 2016/2/1. 3 */ 4 function draw (id){ 5 var canvas = document.getElementById(id); 6 var context = canvas.getC 阅读全文
posted @ 2016-02-01 10:35 晨落梦公子 阅读(211) 评论(0) 推荐(0)
canvas变换（移动，缩放等）
摘要：代码： 1 /** 2 * Created by Administrator on 2016/1/30. 3 */ 4 function draw (id){ 5 var canvas = document.getElementById(id); 6 var context = canvas.get 阅读全文
posted @ 2016-01-30 16:35 晨落梦公子 阅读(4801) 评论(0) 推荐(0)
canvas实现平铺
摘要：代码： 1 /** 2 * Created by Administrator on 2016/1/30. 3 */ 4 function draw(id){ 5 var canvas = document.getElementById(id); 6 var context = canvas.getC 阅读全文
posted @ 2016-01-30 16:17 晨落梦公子 阅读(304) 评论(0) 推荐(0)
canvas线条笔帽及连接
摘要：1） 线条笔帽篇： 1 function draw (id) { 2 var canvas = document.getElementById(id); 3 context = canvas.getContext("2d"); 4 buttDemo(); 5 roundDemo(); 6 squar 阅读全文
posted @ 2016-01-30 12:06 晨落梦公子 阅读(331) 评论(0) 推荐(0)
canvas渐变
摘要：代码： 1 /** 2 * Created by Administrator on 2016/1/29. 3 */ 4 function draw(id){ 5 var canvas = document.getElementById(id); 6 var context = canvas.getC 阅读全文
posted @ 2016-01-29 15:22 晨落梦公子 阅读(190) 评论(0) 推荐(0)
canvas图像以及剪切
摘要：图像篇： 代码： 1 /** 2 * Created by Administrator on 2016/1/28. 3 */ 4 function draw (id){ 5 var canvas = document.getElementById(id); 6 var context = canva 阅读全文
posted @ 2016-01-28 20:03 晨落梦公子 阅读(473) 评论(0) 推荐(0)
canvas绘制曲线
摘要：代码： 1 /** 2 * Created by Administrator on 2016/1/28. 3 */ 4 function draw (id){ 5 var canvas = document.getElementById(id); 6 var context = canvas.get 阅读全文
posted @ 2016-01-28 19:32 晨落梦公子 阅读(1277) 评论(0) 推荐(0)
canvas图形组合
摘要：代码： 1 /** 2 * Created by Administrator on 2016/1/27. 3 */ 4 function draw (id){ 5 var canvas = document.getElementById(id); 6 var context = canvas.get 阅读全文
posted @ 2016-01-27 16:40 晨落梦公子 阅读(444) 评论(0) 推荐(0)
canvas路径绘制
摘要：惯例，先贴代码： 1 /** 2 * Created by Administrator on 2016/1/27. 3 */ 4 function draw (id){ 5 var canvas = document.getElementById(id); 6 var context = canva 阅读全文
posted @ 2016-01-27 15:01 晨落梦公子 阅读(258) 评论(0) 推荐(0)

1 2 下一页