convas demo1

1 getContext

语法

Canvas.getContext(contextID)

参数

参数 contextID 指定了您想要在画布上绘制的类型。当前唯一的合法值是 "2d"，它指定了二维绘图，并且导致这个方法返回一个环境对象，该对象导出一个二维绘图 API。

提示：在未来，如果 <canvas> 标签扩展到支持 3D 绘图，getContext() 方法可能允许传递一个 "3d" 字符串参数。

返回值

一个 CanvasRenderingContext2D 对象，使用它可以绘制到 Canvas 元素中。

可以用下面两种方法直接设置变换矩阵：

context.transform(m11, m12, m21, m22, dx, dy)
context.setTransform(m11, m12, m21, m22, dx, dy)
第一个方法直接将当前的变形矩阵乘上下面的矩阵(注意排列的顺序)：
m11 m21 dx
m12 m22 dy
0 0 1
第二个方法会重置当前的变形矩阵为单位矩阵，然后以相同的参数调用transform方法。

function draw() {
  var canvas = document.getElementById("lesson01");
  var ctx = canvas.getContext("2d");

  var sin = Math.sin(Math.PI/6);
  var cos = Math.cos(Math.PI/6);
  ctx.translate(200, 200);
  var c = 0;
  for (var i=0; i <= 12; i++) {
    c = Math.floor(255 / 12 * i);
    ctx.fillStyle = "rgb(" + c + "," + c + "," + c + ")";
    ctx.fillRect(0, 0, 100, 10);
    ctx.transform(cos, sin, -sin, cos, 0, 0);
  }

  ctx.setTransform(-1, 0, 0, 1, 200, 200);
  ctx.fillStyle = "rgba(255, 128, 255, 0.5)";
  ctx.fillRect(0, 50, 100, 100);
}

　　所有的变换起始都是通过变换矩阵实现的，所以上述的平移，旋转，缩放都可以用相应的矩阵代替，精通数学的同学可以自己推导出来：
平移：context.translate(dx,dy)可以使用context.transform (1,0,0,1,dx,dy)或者context.transform(0,1,1,0.dx,dy)代替。
旋转：context.rotate(θ)可以使用context.transform(Math.cos(θ*Math.PI/180)，Math.sin(θ*Math.PI/180),-Math.sin(θ*Math.PI/180),Math.cos(θ*Math.PI/180)，0，0)或者

context.transform(-Math.sin(θ*Math.PI/180),Math.cos(θ*Math.PI/180)，Math.cos(θ*Math.PI/180)，Math.sin(θ*Math.PI/180), 0，0)代替。
缩放：context.scale(sx, sy)可以使用context.transform(sx,0,0,sy,0,0)或者context.transform(0,sy,sx,0, 0,0)代替。

<html>
<head>
<style type="text/css">
body
{
font-family: Monospace;
background-color: #222222;
margin: 0px;
overflow: hidden;
}
</style>
<script type="text/javascript">
var g;
var canvas;
var width = window.innerWidth ;
var height = window.innerHeight ;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
var mouseX = 0;
var mouseY = 0;
var pmouseX = 0;
var pmouseY = 0;
var mousePressed = false;
var drawRate = 6;
var frameCount = 0;

var PI = Math.PI;
var TWO_PI = 2*Math.PI;
var HALF_PI = Math.PI*0.5;

function init(){
canvas = document.getElementById('canvas');
canvas.width = width;
canvas.height = height;

g = canvas.getContext('2d');
g.setTransform(1, 0, 0, 1, 0,0);
document.addEventListener('mousemove', onDocumentMouseMove, false);
document.addEventListener('mousedown', onDocumentMouseDown, false);
document.addEventListener('mouseup', onDocumentMouseUp, false);
document.addEventListener('keydown', onDocumentKeyDown, false);
setup();
drawInternal();
}

function windowResize(){
// width = window.innerWidth ;
// height = window.innerHeight ;
// canvas.width = width;
// canvas.height = height;
g.setTransform(1, 0, 0, 1, 0,0);
}

function onDocumentMouseMove(event) {
mouseX = event.clientX - canvas.offsetLeft;
mouseY = event.clientY - canvas.offsetTop;
}

function onDocumentMouseDown(event) {
mousePressed = true;
mousePressedEvent();
}

function onDocumentMouseUp(event) {
mousePressed = false;
}

function onDocumentKeyDown(event){
//setup();
}

function drawInternal(){
draw();
setTimeout('drawInternal()', drawRate);
pmouseX = mouseX;
pmouseY = mouseY;
frameCount++;
}

function clear(){
g.clearRect(0,0,width,height);
}

function line(x1, y1, x2, y2){
g.beginPath();
g.moveTo(x1,y1);
g.lineTo(x2,y2);
g.closePath();
g.stroke();
}

function fillStrokeCircle(x,y,radius){
if(radius<=0)
radius = 0;
g.beginPath();
g.arc(x, y, radius, 0, TWO_PI, true);
g.closePath();
g.fill();
g.stroke();
}

function fillCircle(x, y, radius){
if(radius<=0)
radius = 0;
g.beginPath();
g.arc(x, y, radius, 0, TWO_PI, true);
g.closePath();
g.fill();
}

function strokeCircle(x, y, radius){
if(radius<=0)
radius = 0;
g.beginPath();
g.arc(x,y, radius, 0, TWO_PI, true);
g.stroke();
}

function dist(ax, ay, bx, by) {
var dx = bx - ax;
dy = by - ay;
return Math.sqrt(dx * dx + dy * dy + dz * dz);
}

var currentRandom = Math.random;

// Pseudo-random generator
function Marsaglia(i1, i2) {
// from http://www.math.uni-bielefeld.de/~sillke/ALGORITHMS/random/marsaglia-c
var z=i1 || 362436069, w= i2 || 521288629;
var nextInt = function() {
z=(36969*(z&65535)+(z>>>16)) & 0xFFFFFFFF;
w=(18000*(w&65535)+(w>>>16)) & 0xFFFFFFFF;
return (((z&0xFFFF)<<16) | (w&0xFFFF)) & 0xFFFFFFFF;
};

this.nextDouble = function() {
var i = nextInt() / 4294967296;
return i < 0 ? 1 + i : i;
};
this.nextInt = nextInt;
}
Marsaglia.createRandomized = function() {
var now = new Date();
return new Marsaglia((now / 60000) & 0xFFFFFFFF, now & 0xFFFFFFFF);
};

// Noise functions and helpers
function PerlinNoise(seed) {
var rnd = seed !== undefined ? new Marsaglia(seed) : Marsaglia.createRandomized();
var i, j;
// http://www.noisemachine.com/talk1/17b.html
// http://mrl.nyu.edu/~perlin/noise/
// generate permutation
var p = new Array(512);
for(i=0;i<256;++i) { p[i] = i; }
for(i=0;i<256;++i) { var t = p[j = rnd.nextInt() & 0xFF]; p[j] = p[i]; p[i] = t; }
// copy to avoid taking mod in p[0];
for(i=0;i<256;++i) { p[i + 256] = p[i]; }

function grad3d(i,x,y,z) {
var h = i & 15; // convert into 12 gradient directions
var u = h<8 ? x : y,
v = h<4 ? y : h===12||h===14 ? x : z;
return ((h&1) === 0 ? u : -u) + ((h&2) === 0 ? v : -v);
}

function grad2d(i,x,y) {
var v = (i & 1) === 0 ? x : y;
return (i&2) === 0 ? -v : v;
}

function grad1d(i,x) {
return (i&1) === 0 ? -x : x;
}

function lerp(t,a,b) { return a + t * (b - a); }

this.noise3d = function(x, y, z) {
var X = Math.floor(x)&255, Y = Math.floor(y)&255, Z = Math.floor(z)&255;
x -= Math.floor(x); y -= Math.floor(y); z -= Math.floor(z);
var fx = (3-2*x)*x*x, fy = (3-2*y)*y*y, fz = (3-2*z)*z*z;
var p0 = p[X]+Y, p00 = p[p0] + Z, p01 = p[p0 + 1] + Z, p1 = p[X + 1] + Y, p10 = p[p1] + Z, p11 = p[p1 + 1] + Z;
return lerp(fz,
lerp(fy, lerp(fx, grad3d(p[p00], x, y, z), grad3d(p[p10], x-1, y, z)),
lerp(fx, grad3d(p[p01], x, y-1, z), grad3d(p[p11], x-1, y-1,z))),
lerp(fy, lerp(fx, grad3d(p[p00 + 1], x, y, z-1), grad3d(p[p10 + 1], x-1, y, z-1)),
lerp(fx, grad3d(p[p01 + 1], x, y-1, z-1), grad3d(p[p11 + 1], x-1, y-1,z-1))));
};

this.noise2d = function(x, y) {
var X = Math.floor(x)&255, Y = Math.floor(y)&255;
x -= Math.floor(x); y -= Math.floor(y);
var fx = (3-2*x)*x*x, fy = (3-2*y)*y*y;
var p0 = p[X]+Y, p1 = p[X + 1] + Y;
return lerp(fy,
lerp(fx, grad2d(p[p0], x, y), grad2d(p[p1], x-1, y)),
lerp(fx, grad2d(p[p0 + 1], x, y-1), grad2d(p[p1 + 1], x-1, y-1)));
};

this.noise1d = function(x) {
var X = Math.floor(x)&255;
x -= Math.floor(x);
var fx = (3-2*x)*x*x;
return lerp(fx, grad1d(p[X], x), grad1d(p[X+1], x-1));
};
}

// these are lifted from Processing.js
// processing defaults
var noiseProfile = { generator: undefined, octaves: 4, fallout: 0.5, seed: undefined};

function noise(x, y, z) {
if(noiseProfile.generator === undefined) {
// caching
noiseProfile.generator = new PerlinNoise(noiseProfile.seed);
}
var generator = noiseProfile.generator;
var effect = 1, k = 1, sum = 0;
for(var i=0; i<noiseProfile.octaves; ++i) {
effect *= noiseProfile.fallout;
switch (arguments.length) {
case 1:
sum += effect * (1 + generator.noise1d(k*x))/2; break;
case 2:
sum += effect * (1 + generator.noise2d(k*x, k*y))/2; break;
case 3:
sum += effect * (1 + generator.noise3d(k*x, k*y, k*z))/2; break;
}
k *= 2;
}
return sum;
};

function Worm(x,y){
this.x = x;
this.y = y;
this.lx = x;
this.ly = y;
this.heading = Math.sin(frameCount*0.083) * PI;;
this.rotation = Math.random() * (PI / (Math.random() * 70));
this.rate = 0;
this.maxLength = 15 + (noise(frameCount * 0.0025, frameCount*0.1) * 15);
this.detail = 2;
this.thickness = 3;
this.thicknessTarget = 5 + Math.random() * 10;

var cIndex = parseInt( Math.random() * colors.length );
this.c = colors[cIndex];
this.life = 30 + Math.random() * 120;
this.segments = new Array();
this.ooo = true;
this.counter = noise(frameCount * 0.1, frameCount*.1);

this.update = function(){
this.life--;
if(this.life > 0){
this.thickness += (this.thicknessTarget-this.thickness) * 0.1;
this.thickness += 0.1;
if(this.thickness > this.thicknessTarget)
this.thickness = this.thicknessTarget;
this.heading += this.rotation;
this.rate = Math.cos( this.counter / 200.0) * (10 + noise(frameCount*0.05) * 10);
this.rotation = Math.sin(this.counter/this.rate) * (this.segments.length+1) * 0.010;
this.counter++;

var speedMod = (this.segments.length * this.segments.length * this.segments.length) * 0.0015 * this.thickness / this.thicknessTarget;
var totalSpeed = (this.detail + speedMod);
var nx = Math.cos(this.heading) * totalSpeed;
var ny = Math.sin(this.heading) * totalSpeed;
this.walk(nx,ny);
}
else{
if(this.segments.length > 1){
this.segments.pop();
}
else{
this.thickness*=0.95;
this.thickness-=0.2;
if(this.thickness<0.1)
this.ooo = true;
return;
}
}

this.ooo = true;
for(var i=0; i<this.segments.length; i++){
var segment = this.segments[i];
if(segment.ooo() == false){
this.ooo = false;
break;
}
}
}

this.walk = function(nx,ny){
this.lx = this.x;
this.ly = this.y;
this.x += nx;
this.y += ny;
var newSegment = new Segment(this.lx,this.ly,this.x,this.y,this.thickness);
this.segments.unshift(newSegment);

if(this.segments.length > 1)
this.segments[this.segments.length-1].smoothAgainst(this.segments[this.segments.length-2]);

if(this.segments.length >= this.maxLength){
this.segments.pop();
}

}
}

function Segment(x1,y1,x2,y2,thickness){
this.x1 = x1;
this.y1 = y1;
this.x2 = x2;
this.y2 = y2;
this.thickness = thickness;

var angle = Math.atan2(y2-y1,x2-x1);

this.lAngle = angle - HALF_PI;
var lDeltaX = Math.cos(this.lAngle) * thickness;
var lDeltaY = Math.sin(this.lAngle) * thickness;
this.leftX1 = x1 + lDeltaX;
this.leftY1 = y1 + lDeltaY;
this.leftX2 = x2 + lDeltaX;
this.leftY2 = y2 + lDeltaY;

this.rAngle = angle + HALF_PI;
var rDeltaX = Math.cos(this.rAngle) * thickness;
var rDeltaY = Math.sin(this.rAngle) * thickness;
this.rightX1 = x1 + rDeltaX;
this.rightY1 = y1 + rDeltaY;
this.rightX2 = x2 + rDeltaX;
this.rightY2 = y2 + rDeltaY;

this.smoothAgainst = function(last){
this.leftX1 = last.leftX2 = (last.leftX2 + this.leftX1) * 0.5;
this.leftY1 = last.leftY2 = (last.leftY2 + this.leftY1) * 0.5;
this.rightX1 = last.rightX2 = (last.rightX2 + this.rightX1) * 0.5;
this.rightY1 = last.rightY2 = (last.rightY2 + this.rightY1) * 0.5;
}

this.ooo = function(){
if(this.x1 < 0 || this.y1 < 0 || this.x1 > width || this.y1>height ||
this.x2 < 0 || this.y2 < 0 || this.x2 > width || this.y2>height)
return true;
else
return false;
}
}

var worms;
var colors = [];
colors[0] = '#2cd9fe';
colors[1] = '#2cfecf';
colors[2] = '#373fdf';
colors[3] = '#88fe1f';
colors[4] = '#48d6ff';
colors[5] = '#b3fcff';
colors[6] = '#f76cad';
colors[7] = '#505083';
colors[8] = '#113a7e';
colors[9] = '#014050';
colors[10] = '#ccf3ef';
colors[11] = '#009437';
colors[12] = '#8fb300';

function setup(){
worms = new Array();
}

hold me
</center>
</div>
<div style="z-index:4; position:absolute; top:0; left:0">
<canvas id="canvas"></canvas>
</div>
</body>
</html>

convas demo1的更多相关文章

struts2 基础demo1
我们都知道 struts2 是基于webframework 出现的优秀的mvc 框架, 他和struts1 完全没有联系.struts2 是一个框架, 啥叫框架呢?是一个优秀的半成品 . web的框 ...
struts2&&Hibernate Demo1
这篇文章和<struts1&&Hibernate Demo1>基本类似,我这里只是拷贝代码了. 最核心的代码:LoginAction.java package action ...
通用窗口类 Inventory Pro 2.1.2 Demo1（上）
插件功能按照Demo1的实现,使用插件来实现一个装备窗口是很easy的,虽然效果还很原始但是也点到为止了,本篇涉及的功能用加粗标出,具体的功能如下: 1.实现了两个窗口,通过点击键盘I来,打开或者关 ...
（23）unity4.6学习Ugui中国文档-------非官方Demo1
大家好,我是广东太阳. 转载请注明出处:http://write.blog.csdn.net/postedit/38922399 更全的内容请看我的游戏蛮牛地址:http://www.unitym ...
20ViewPager demo1,2:接收ViewPager展示View的使用
Demo1 MainActivity .JAVA package com.qf.day20_viewpager_demo1; import java.util.ArrayList; import ja ...
WPF Demo1
<Window x:Class="Demo1.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/ ...
[模拟回调] demo1模拟用字符串调用js函数 demo2模拟springmvc controller回调页面js函数
demo1. 模拟用字符串调用js 函数 function dataQuery() { var strFun = "testCallBack"; var strParam = &q ...
JS-以鼠标位置为中心的滑轮放大功能demo1
以鼠标位置为中心的滑轮放大功能demo1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &qu ...
oracle--分页过程demo1
oracle分页过程demo1: --ROWNUM用法 select o.*,rownum rn from (select * from emp) o where rownum<=10; sel ...

随机推荐

这些年正Android - 大学
还记得,第一次看见小周是在大一的操场上. 她正向教学楼站着,一身白配粉的休闲上衣搭配湖蓝色的牛仔裤,穿着一双很平凡的凉鞋,手里拿着当年的Nokia 3110c,皙清的手指,素颜的站着不言不笑.现在回 ...
jquery 上传回显图片预览
/******************************************************************************* * 异步上传文件,兼容IE8,火狐和谷 ...
C# 调用Adodb对Access数据库执行批量插入
public void BatchInsertIntoAccess(DataTable dt) { ADODB.Connection cn; ADODB.Recordset rs; string st ...
Windows程序设再读笔记02-Unicode
1.ASCII,7位编码,共128个编码,1950年ansi提出. 2.变种的Ascii,0x40等10个代码保留各个国家单独使用,1967年由iso提出.旨在解决重音符号,英镑符号的问题. 3.扩展 ...
Js日期函数Date格式化扩展
prototype是向对象中添加属性和方法,返回对象类型原型的引用,例如对js中日期函数Date进行扩展: Date.prototype.Format = function (fmt) { var o ...
云时代的分布式数据库：阿里分布式数据库服务DRDS
发表于2015-07-15 21:47| 10943次阅读| 来源<程序员>杂志| 27 条评论| 作者王晶昱 <程序员>杂志数据库DRDS分布式沈询摘要:伴随着系统性能.成 ...
nginx修改配置后不生效的问题
nginx增加了新的server name配置,发现nginx -s reload之后总是不生效. http和https均可以打开页面,但是页面是别的server页面,使用的证书也是别的server的 ...
cocos2d-js callFunc传参
1.传递一个参数: pg.TestScene.prototype.init = function () { if (cc.Scene.prototype.init.call(this)) { var ...
Random Javascript code snippets
MollyPages.org"You were wrong case.To live here is to live." Home Pages / Database / Forms ...
(转)IC验证概述
验证是确保设计和预定的设计期望一致的过程,设计期望通常是通过设计规范来定义的.对于芯片设计,在不同的阶段可以分为:寄存器传输级(RTL)的功能验证.门级的仿真验证.形式验证以及时序验证.我们通常所说的 ...

convas demo1

语法

参数

返回值

convas demo1的更多相关文章

随机推荐

热门专题