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属性来填充文本中的字 ...
随机推荐
- 《DSP using MATLAB》Problem 4.14
代码: %% ---------------------------------------------------------------------------- %% Output Info a ...
- 【vue】Mac上安装Node和NPM
http://bubkoo.com/2017/01/08/quick-tip-multiple-versions-node-nvm/ 作为前端开发者,node和npm安装必不可少.然而有时会因为安装新 ...
- 表单添加缩略图及截图js代码
此为表单提交是上传截图的代码,待优化: // 添加小程序图片 function addAvatar(obj){ var file = obj.files[0]; limit($('.avatar_bo ...
- day10 python学习 函数的嵌套命名空间作用域 三元运算 位置参数 默认参数 动态参数
1.三元运算 #1.三元运算 利用已下方法就可以实现一步运算返回a b中大的值 def my_max(a,b): c=0 a=int(input('请输入')) b=int(input('请输入')) ...
- 转 web.config设置之system.webServer 详细介绍，为网站设置默认文档
如何:为 IIS 7.0 配置 <system.webServer> 节2008-06-14 22:26http://technet.microsoft.com/zh-cn/sysinte ...
- MessageRPC
项目地址 : https://github.com/kelin-xycs/MessageRPC MessageRPC 一个 用 C# 实现的 使用 Message 的 RPC MessageRPC ...
- Ionic Tabs使用
1. 创建Tabs相关页面 ionic g page tabs ionic g page TabOne ionic g page TabTwo ionic g page TabThree 2. 在ta ...
- Android免费短信验证
转载请注明住处:http://blog.csdn.net/crazy1235/article/details/41912003 介绍 短信验证功能大家都很熟悉了.在很多地方都能见到,注册新用户或者短息 ...
- 读书笔记：Sheldon.M.Ross：概率论基础教程：2014.01.22
贝叶斯公式与全概率公式 全概率公式:如果一件事情的发生有多个可能途径,那么这件事情的发生概率就是在不同途径下此事件发生的条件概率的加权平均.权值为各途径本身的发生概率. 贝叶斯公式:通过例子说明其含义 ...
- bzoj1085 骑士精神
Description 在一个5×5的棋盘上有12个白色的骑士和12个黑色的骑士, 且有一个空位.在任何时候一个骑士都能按照骑士的走法(它可以走到和它横坐标相差为1,纵坐标相差为2或者横坐标相差为2, ...