HTML5 Canvas ( 创建图形对象 ) createImageData
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>canvas</title>
<script type="text/javascript" src="../js/jQuery.js"></script>
<style type="text/css">
*{
margin: 0;
padding: 0;
outline: none;
border: none;
}
#canvas{
margin: auto auto;
width: 7rem;
margin: .25rem 0 0 1.5rem;
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="canvas" width="800" height="800"></canvas>
<img id="img" src="" />
</body>
</html>
<script type="text/javascript">
/**
* rem 布局初始化
*/
$('html').css('font-size', $(window).width()/10);
/**
* 获取 canvas 画布
* 获取 canvas 绘图上下文环境
*/
var canvas = $('#canvas')[0];
var cxt = canvas.getContext('2d'); /**
* 创建图形数据对象
* createImageData(宽, 高)
*/
var imgData = cxt.createImageData(canvas.width, canvas.height);
var pxData = imgData.data;
for(var i = 0; i < canvas.width; i++){
for(var j = 0; j < canvas.height; j++){
var p = canvas.width*i+j;
pxData[4*p+0] = parseInt(Math.pow(Math.cos(Math.atan2(j-400,i-400)/2),2)*255);
pxData[4*p+1] = parseInt(Math.pow(Math.cos(Math.atan2(j-400,i-400)/2-2*Math.acos(-1)/3),2)*255);
pxData[4*p+2] = parseInt(Math.pow(Math.cos(Math.atan2(j-400,i-400)/2+2*Math.acos(-1)/3),2)*255);
pxData[4*p+3] = 255;
}
}
cxt.putImageData(imgData, 0,0,0,0,canvas.width,canvas.height);
</script>
HTML5 Canvas ( 创建图形对象 ) createImageData的更多相关文章
- HTML5 Canvas核心技术:图形、动画与游戏开发 PDF扫描版
HTML5 Canvas核心技术:图形.动画与游戏开发 内容简介: <HTML5 Canvas核心技术:图形.动画与游戏开发>中,畅销书作家David Geary(基瑞)先生以实用的范例程 ...
- HTML5 Canvas核心技术图形动画与游戏开发 ((美)David Geary) 中文PDF扫描版
<html5 canvas核心技术:图形.动画与游戏开发>是html5 canvas领域的标杆之作,也是迄今为止该领域内容最为全面和深入的著作之一,是公认的权威经典.amazon五星级超级 ...
- HTML5 Canvas核心技术图形动画与游戏开发（读书笔记）----第一章，基础知识
一,canvas元素 1 为了防止浏览器不支持canvas元素,我们设置“后备内容”(fallback content),下面紫色的字即为后备内容 <canvas id="canvas ...
- Html5 Canvas核心技术(图形,动画,游戏开发)--基础知识
基础知识 canvas 元素可以说是HTML5元素中最强大的一个,他真正的能力是通过canvas的context对象表现出来的.该环境对象可以从canvas元素身上获得. <body> & ...
- HTML5—canvas绘制图形（1）
1.canvas基础知识 canvas元素是HTML5中新增的一个重要的元素,专门用来绘制图形,不过canvas本身不具备画图的能力,在页面中放置了canvas元素,就相当于在页面中放置了一块矩形的“ ...
- html5 canvas中CanvasGradient对象用法
html5 中canvas提供了强大的渲染样式,可以实现一些比较复杂的样式设置,今天学习了CanvasGradient对象可以实现一个颜色的渐变 CanvasGradient对象可以实现两种不同形式的 ...
- html5 Canvas绘制图形入门详解
html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome. ...
- HTML5 Canvas核心技术—图形、动画与游戏开发.pdf5
文本的定位 水平与垂直定位:当使用strokeText()和fillText()绘制文本时,指定了所绘文本的X与Y坐标,还有textAlign与textBaseline两个属性 textAlign:s ...
- HTML5 Canvas核心技术—图形、动画与游戏开发.pdf1
canvas元素可以说是HTML5元素中功能最强大的一个,它真正的能力是通过Canvas的context对象(绘图上下文)表现出来的 fillText()方法使用fillStyle属性来填充文本中的字 ...
随机推荐
- hdu1166 敌兵布阵 树状数组/线段树
数列的单点修改.区间求和 树状数组或线段树入门题 #include<stdio.h> #include<string.h> ],N; void add(int x,int a) ...
- Sencha Touch+PhoneGap打造超级奶爸之喂养记(一) 源码免费提供（转）
起源 非常高兴我的宝宝健康平安的出生了.对于初次做奶爸的我,喜悦过后,面临着各中担心,担心宝宝各项指标是否正常.最初几天都是在医院待着,从出生那一天开始,护士妹妹隔一段时间就会来问宝宝的喂奶,大小便, ...
- day41 mysql 学习 练习题 重要*****
MySQL 练习题[二1.表如下: 收获和注意点:***** #1 GROUP by 可以放到where s_id in ()条件局后边 GROUP BY s_id having 详见题12 #2 做 ...
- pipelinedb 滑动窗口
滑动窗口可以方便的让我们进行一段时间的数据分析 几个主要函数 clock_timestamp 内置的函数,总是返回当前的时间戳 arrival_timestamp 事件达到的时间 单滑动窗口 参考 C ...
- GridView实现数据编辑和删除
<asp:GridView ID="gv_Emplogin" runat="server" AutoGenerateColumns="False ...
- 单变量微积分笔记21——三角替换2（tan和sec）
tan和sec常用公式 我一直认为三角函数中只有sin和cos是友好的,其它都是变态.现在不得不接触一些变态: 这些变态的相关等式: 等式的证明 这个稍有点麻烦,先要做一些前置工作. 三角替换 示例1 ...
- Hibernate对substring和cast的支持问题
http://blog.sina.com.cn/s/blog_8acd9e4b0102uwev.html Hibernate对substring和cast的支持问题 问题:要比较日期的范围...这是只 ...
- Android Drawable Mipmap Vector使用及Vector兼容
原文地址:http://blog.csdn.net/eclipsexys/article/details/51838119 http://blog.csdn.net/qq_15545283/artic ...
- Eclipse整合Tomcat开发Dynamic Web Project环境总结
一.引子 习惯了MyEclipse的你是否曾想过基于Eclipse进行Dynamic Web Project项目开发呢?网上资料颇多,但是实践起来却发现总有这样那样的问题,设计Lucene搜索引擎项目 ...
- 从Qt谈到C++(一)：关键字explicit与隐式类型转换
转载:果冻虾仁 提出疑问 当我们新建了一个Qt的widgets应用工程时.会自动生成一个框架,包含了几个文件. 其中有个mainwindow.h的头文件.就是你要操纵的UI主界面了.我们看看其中的一段 ...