随笔分类 -  HTML5

摘要:<!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 14:22 Bug山Bug海 阅读(764) 评论(0) 推荐(0) 编辑
摘要:<!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海 阅读(461) 评论(0) 推荐(0) 编辑
摘要:<!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海 阅读(1046) 评论(0) 推荐(0) 编辑
摘要:<!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海 阅读(419) 评论(0) 推荐(0) 编辑
摘要:$代表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海 阅读(530) 评论(0) 推荐(0) 编辑
摘要: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海 阅读(519) 评论(0) 推荐(0) 编辑
摘要: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海 阅读(352) 评论(0) 推荐(0) 编辑
摘要: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海 阅读(1045) 评论(0) 推荐(0) 编辑
摘要:<!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海 阅读(583) 评论(0) 推荐(0) 编辑
摘要://得到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海 阅读(5727) 评论(0) 推荐(0) 编辑
摘要:所有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海 阅读(708) 评论(0) 推荐(0) 编辑
摘要:window.onload = function () { //得到2D渲染上下文 var context = document.getElementById("myCanvas").getContext("2d"); var x = 50, y = 50, //原点坐标 radius = 50, //半径 startAngle = 0, //起始弧度 endAngle = Math.PI * 2, 终止弧度 ... 阅读全文
posted @ 2012-07-06 14:19 Bug山Bug海 阅读(695) 评论(0) 推荐(0) 编辑
摘要:window.onload = function () { //得到2D渲染上下文 var context = document.getElementById("myCanvas").getContext("2d"); //填充一个矩形 var x = 40, y = 40; context.fillStyle = "blue"; //设置填充色 context.fillRect(x + 5, y + 5, 40, 90); ... 阅读全文
posted @ 2012-07-06 13:18 Bug山Bug海 阅读(386) 评论(0) 推荐(0) 编辑

点击右上角即可分享
微信分享提示