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属性来填充文本中的字 ...
随机推荐
- spring boot下mybatis遇到No operations allowed after connection closed.
在配置文件中添加 # for initial,min,maxspring.datasource.initialSize=5spring.datasource.minIdle=5spring.datas ...
- ehci及其伴随ohci主机控制器驱动分析
1. 正常插入 插上U盘产生中断调用usb_hcd_irq: usb_hcd_irq ehci_irq usb_hcd_resume_root_hub queue_work(pm_wq, &h ...
- ubuntu14.04下安装ffmpeg
ubuntu14.04下安装ffmpeg 一.安装各种依赖包 1.yasm(libx264需要依赖yasm) sudo apt-get install yasm 2.libx264 sudo apt- ...
- systemd学习笔记
一.systemd介绍 systemd即为system daemon,是linux下的一种init软件与多数发行版使用的System V风格init相比,systemd采用了以下新技术: (1) 采用 ...
- Jmeter的CSV参数化策略
前提:准备一份csv文件,数字为1-9即可 线程相当于vu,循环相当于迭代 一.所有线程所有线程共享这一份文件,数据有一个线程拿走了,其他线程就拿不走 例子1:只有1个线程,循环次数2次,那么,按照上 ...
- some ideas
1. 3d camera h/w: 单反+projector s/w: 抓图 -> 3d成像 -> 3d显示 --> 3d编辑(?具体要那些功能)--> to 3d prin ...
- TroubleShoot: Enable Developer Mode in Windows 10 Insider Preview Build 10074
There is a known issue in Windows 10 Insider Preview build 10074 (see here). Developers cannot enabl ...
- Hadoop文件系统支持释疑之S3
一.引言 Hadoop版本提供了对多种文件系统的支持,但是这些文件系统是以何种方式实现的,其实现原理是什么以前并没有深究过.今天正好有人咨询我这个问题:Hadoop对S3的支持原理是什么?特此总结一下 ...
- 修改phpMYadmin 链接其他数据库地址的方法
找到phpmyadmin的文件 修改 config.inc.php 文件 框红的地方修改成你需要链接的数据库信息 重启环境,再次访问 phpmyadmin 地址即可
- 本地ip 和 网络ip 解释
本地IP其实就是私有IP地址10.0.0.0--10.255.255.255172.16.0.0----172.31.255.255192.168.0.0---192.168.255.255 这些都是 ...