2012年7月11日
HTML5 Cavans(11) 简单动画：圆周运动
摘要： <!DOCTYPE html ><html><head> <title></title> <script type="text/javascript"> window.onload = function () { var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); var btnStart = document.getElementById 阅读全文
posted @ 2012-07-11 13:21 Bug山Bug海 阅读(466) 评论(0) 推荐(0)
HTML5 Cavans(10) 简单动画:摆动
摘要： <!DOCTYPE html ><html><head> <title></title> <script type="text/javascript"> window.onload = function () { var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); var btnStart = document.getElementById 阅读全文
posted @ 2012-07-11 11:53 Bug山Bug海 阅读(1054) 评论(0) 推荐(0)
HTML5 Cavans(9) 像素处理
摘要： <!DOCTYPE html><html><head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title></title> <script type="text/javascript"> window.onload = function () { var cancans = document.getElementById("myCanvas&q 阅读全文
posted @ 2012-07-11 11:02 Bug山Bug海 阅读(425) 评论(0) 推荐(0)
2012年7月7日
HTML5 Cavans(8) 图像
摘要： $代表jquery window.onload = function () { var cancans = document.getElementById("myCanvas"); //得到2D渲染上下文 var context = document.getElementById("myCanvas").getContext("2d"); var img = new Image(); img.width = "500"; img.height = "... 阅读全文
posted @ 2012-07-07 23:02 Bug山Bug海 阅读(539) 评论(0) 推荐(0)
HTML5 Canvas(7) 渐变
摘要： var context = document.getElementById("myCanvas").getContext("2d"); context.save(); context.shadowBlur = 20; //模糊值 context.shadowOffsetX = 10; //阴影向X偏移量 context.shadowOffsetY = 10; //阴影向Y偏移量 context.shadowColor = "blue"; //阴影颜色 ... 阅读全文
posted @ 2012-07-07 15:14 Bug山Bug海 阅读(525) 评论(0) 推荐(0)
HTML5 Cavans(6) 变换矩阵，全局阿尔法值，合成
摘要： var context = document.getElementById("myCanvas").getContext("2d"); //旋转45度，和context.rotate(Math.PI / 4)效果一样 context.setTransform(1, 0, 0, 1, 0, 0);//重置矩阵 var angle = Math.PI / 4; var xScale = Math.cos(angle); var ySkew = -Math.sin(a... 阅读全文
posted @ 2012-07-07 13:58 Bug山Bug海 阅读(355) 评论(0) 推荐(0)
HTML5 Cavans(5) 平移 缩放 旋转
摘要： translate平移，接受2个参数，分别是x和y轴平移位置，平移的是绘图原点，之后绘图的原点就是平移后的位置，之前的图位置不变scale 缩放，接受2个参数，分别是x和y缩放系数，1是原来大小，也是对之后绘图影响，之前图没影响rotate旋转，参数是旋转度数，顺时针 var cancans = document.getElementById("myCanvas"); //得到2D渲染上下文 var context = document.getElementById("myCanvas").getContext("2d"); ... 阅读全文
posted @ 2012-07-07 09:53 Bug山Bug海 阅读(1054) 评论(0) 推荐(0)
HTML5 Cavans(4) 保存和恢复Cavans状态
摘要： <!DOCTYPE html><html><head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title></title> <script type="text/javascript"> window.onload = function () { var cancans = document.getElementById("myCanvas&q 阅读全文
posted @ 2012-07-07 09:14 Bug山Bug海 阅读(594) 评论(0) 推荐(0)
2012年7月6日
HTML5 Canvans(3) 调整Canvas画布大小和擦除
摘要： //得到2D渲染上下文var cancans = document.getElementById("myCanvas");var width = cancans.getAttribute("width");var height = cancans.getAttribute("height");var context = document.getElementById("myCanvas").getContext("2d");var x = 40, y = 40;context.fillStyle 阅读全文
posted @ 2012-07-06 20:37 Bug山Bug海 阅读(5762) 评论(0) 推荐(0)
HTML5 Canvans 常用API整理
摘要： 所有API调用都是基于自定义的对象 var context = document.getElementById("myCanvas").getContext("2d");中W3C标准：http://www.w3.org/TR/2012/WD-2dcontext-20120329/中文介绍(部分)：http://www.w3school.com.cn/htmldom/dom_obj_canvasrenderingcontext2d.asp讲画布内容导出为图像 document.getElementById("myCanvas").toD 阅读全文
posted @ 2012-07-06 14:33 Bug山Bug海 阅读(715) 评论(0) 推荐(0)