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属性来填充文本中的字 ...
随机推荐
- L2-013. 红色警报
战争中保持各个城市间的连通性非常重要.本题要求你编写一个报警程序,当失去一个城市导致国家被分裂为多个无法连通的区域时,就发出红色警报.注意:若该国本来就不完全连通,是分裂的k个区域,而失去一个城市并不 ...
- python学习之-软件开发的目录规范
通常软件目录下有几个标准文件夹 软件主文件夹命名,通常都是大写(ATM_SHOPPING) ------------------------------------------------------ ...
- java8 array、list操作 汇【3】）（-Java8新特性之Collectors 详解
//编写一个定制的收集器 public static class MultisetCollector<T> implements Collector<T, Multiset<T ...
- CH4101 银河英雄传说
题意 4101 银河英雄传说 0x40「数据结构进阶」例题 描述 公元五八○一年,地球居民迁移至金牛座α第二行星,在那里发表银河联邦创立宣言,同年改元为宇宙历元年,并开始向银河系深处拓展. 宇宙历七 ...
- ES6必知必会 （三）—— 数组和对象的拓展
数组的扩展 1.拓展运算符('...'),它相当于rest参数的逆运算,用于将一个数组转换为用逗号分隔的参数序列: console.log(...[1, 2, 3]) // 1 2 3 console ...
- day41 mysql 学习 练习题 重要*****
MySQL 练习题[二1.表如下: 收获和注意点:***** #1 GROUP by 可以放到where s_id in ()条件局后边 GROUP BY s_id having 详见题12 #2 做 ...
- SQL Server中如何实现遍历表的记录
SQL Server遍历表一般都要用到游标,SQL Server中可以很容易的用游标实现循环,实现SQL Server遍历表中记录. 但游标在实际的开发中都不推荐使用. 我们知道还可以借助临时表或表变 ...
- tomcat和servlet关系
https://blog.csdn.net/weixin_30531261/article/details/78574410 图不错:https://www.cnblogs.com/fengli999 ...
- GPU驱动兼容性问题
GPU驱动兼容性问题 问题描述: 将笔记本的GTX860M 的驱动升级到了376.09版本,出现登陆界面,输入密码后黑屏. 解决思路: 由于正常显示登陆窗口,且可以输入密码,基本排除硬件问题和集成显卡 ...
- bzoj2467生成树
题目:http://www.lydsy.com/JudgeOnline/problem.php?id=2467 大水题. #include<iostream> #include<cs ...