h5-9 canvas

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style>

body{ background:black;}

#c1{ background:white;}

</style>

<script>

window.onload = function(){

    var oC = document.getElementById('c1');

    var oGC = oC.getContext('2d');

    oGC.fillRect(0,0,100,100);

    oGC.fillStyle = 'red';

    oGC.globalAlpha = 0.5;

    oGC.fillRect(50,50,100,100);

};

</script>

</head>

<body>

<canvas id="c1" width="400" height="400"></canvas>

</body>

</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style>

body{ background:black;}

#c1{ background:white;}

</style>

<script>

window.onload = function(){

    var oC = document.getElementById('c1');

    var oGC = oC.getContext('2d');

    oGC.fillRect(0,0,100,100);

    oGC.fillStyle = 'red';

    oGC.globalCompositeOperation = 'xor';

    oGC.fillRect(50,50,100,100);

};

</script>

</head>

<body>

<canvas id="c1" width="400" height="400"></canvas>

</body>

</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style>

body{ background:black;}

#c1{ background:white;}

#img1{ background:white;}

</style>

<script>

window.onload = function(){

    var oImg = document.getElementById('img1');

    var oC = document.getElementById('c1');

    var oGC = oC.getContext('2d');

    oGC.fillRect(0,0,100,100);

    oGC.fillStyle = 'red';

    oGC.globalCompositeOperation = 'xor';

    oGC.fillRect(50,50,100,100);

    //alert( oC.toDataURL() );

    oImg.src = oC.toDataURL();

};

</script>

</head>

<body>

<canvas id="c1" width="400" height="400"></canvas>

<img id="img1" src="" />

</body>

</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style>

body{ background:black;}

#c1{ background:white;}

#img1{ background:white;}

</style>

<script>

window.onload = function(){

    var oImg = document.getElementById('img1');

    var oC = document.getElementById('c1');

    var oGC = oC.getContext('2d');

    oGC.beginPath();

    oGC.arc(100,100,50,0,360*Math.PI/180,false);

    oGC.closePath();

    oGC.fill();

    oC.onmousedown = function(ev){

        var ev = ev || window.event;

        var x = ev.clientX - oC.offsetLeft;

        var y = ev.clientY - oC.offsetTop;

        if( oGC.isPointInPath(x,y) ){

            alert(123);

        }

    };

};

</script>

</head>

<body>

<canvas id="c1" width="400" height="400"></canvas>

<img id="img1" src="" />

</body>

</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style>

body{ background:black;}

#c1{ background:white;}

#img1{ background:white;}

</style>

<script>

window.onload = function(){

    var oImg = document.getElementById('img1');

    var oC = document.getElementById('c1');

    var oGC = oC.getContext('2d');

    oGC.beginPath();

    oGC.arc(100,100,50,0,360*Math.PI/180,false);

    oGC.closePath();

    oGC.fill();

    oGC.beginPath();

    oGC.arc(200,200,50,0,360*Math.PI/180,false);

    oGC.closePath();

    oGC.fill();

    oC.onmousedown = function(ev){

        var ev = ev || window.event;

        var x = ev.clientX - oC.offsetLeft;

        var y = ev.clientY - oC.offsetTop;

        if( oGC.isPointInPath(x,y) ){//isPointInPath只作用于最后画出来的oGC

            alert(123);

        }

    };

};

</script>

</head>

<body>

<canvas id="c1" width="400" height="400"></canvas>

<img id="img1" src="" />

</body>

</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style>

body{ background:black;}

#c1{ background:white;}

#img1{ background:white;}

</style>

<script>

window.onload = function(){

    var oImg = document.getElementById('img1');

    var oC = document.getElementById('c1');

    var oGC = oC.getContext('2d');

    var c1 = new Shape(100,100,50);

    var c2 = new Shape(200,200,50);

    oC.onmousedown = function(ev){

        var ev = ev || window.event;

        var point = {

            x : ev.clientX - oC.offsetLeft,

            y : ev.clientY - oC.offsetTop

        };

        c1.reDraw(point);

        c2.reDraw(point);

    };

    c1.click = function(){

        alert(123);

    };

    c2.click = function(){

        alert(456);

    };

    function Shape(x,y,r){//构造函数

        this.x = x;

        this.y = y;

        this.r = r;

        oGC.beginPath();

        oGC.arc(this.x,this.y,this.r,0,360*Math.PI/180,false);

        oGC.closePath();

        oGC.fill();

    }

    Shape.prototype.reDraw = function(point){//构造函数添加方法

        oGC.beginPath();

        oGC.arc(this.x,this.y,this.r,0,360*Math.PI/180,false);

        oGC.closePath();

        oGC.fill();

        if( oGC.isPointInPath(point.x,point.y) ){

            this.click();

        }

    };

};

</script>

</head>

<body>

<canvas id="c1" width="400" height="400"></canvas>

<img id="img1" src="" />

</body>

</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style>

body{ background:black;}

#c1{ background:white;}

</style>

<script type="text/javascript" src="jCanvaScript.1.5.18.min.js"></script>   //画布的js

<script>

window.onload = function(){

    var oC = document.getElementById('c1');

    var oGC = oC.getContext('2d');

    jc.start('c1',true);  //开始，第二个参数：代表重绘的意思，只有重绘了才有点击事件。

    //jc.rect(100,100,50,50,'#ff0000',1);//画矩形

    jc.circle(100,100,50,'#ff0000',1).click(function(){//画园，1表示填充，0表示不填充。

        alert(123);

    });

    jc.start('c1');//闭合

};

</script>

</head>

<body>

<canvas id="c1" width="400" height="400"></canvas>

</body>

</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style>

body{ background:black;}

#c1{ background:white;}

</style>

<script type="text/javascript" src="jCanvaScript.1.5.18.min.js"></script>

<script>

window.onload = function(){

    var oC = document.getElementById('c1');

    var oGC = oC.getContext('2d');

    jc.start('c1',true);  //第二个参数：代表重绘的意思

    //jc.rect(100,100,50,50,'#ff0000',1);

    jc.circle(100,100,50,'#ff0000',1).draggable();//拖拽了就可以拖着走了

    jc.start('c1');

};

</script>

</head>

<body>

<canvas id="c1" width="400" height="400"></canvas>

</body>

</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style>

body{ background:black;}

#c1{ background:white;}

</style>

<script type="text/javascript" src="jCanvaScript.1.5.18.min.js"></script>

<script>

window.onload = function(){

    var oInput = document.getElementById('input1');

    var oC = document.getElementById('c1');

    var oGC = oC.getContext('2d');

    jc.start('c1',true);  //第二个参数：代表重绘的意思

    //jc.rect(100,100,50,50,'#ff0000',1);

    jc.circle(100,100,50,'#ff0000',1).id('c11');//给js加id为c11

    jc.start('c1');//关闭，相当于close.

    oInput.onclick = function(){

        jc('#c11').color('#ffff00');//通过#c11确定上面的js

    };

};

</script>

</head>

<body>

<canvas id="c1" width="400" height="400"></canvas>

<input type="button" value="点击" id="input1" />

</body>

</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style>

body{ background:black;}

#c1{ background:white;}

</style>

<script type="text/javascript" src="jCanvaScript.1.5.18.min.js"></script>

<script>

window.onload = function(){

    var oInput = document.getElementById('input1');

    var oC = document.getElementById('c1');

    var oGC = oC.getContext('2d');

    jc.start('c1',true);  //第二个参数：代表重绘的意思

    //jc.rect(100,100,50,50,'#ff0000',1);

    jc.circle(100,100,50,'#ff0000',1).id('c1');

    jc.start('c1');

    oInput.onclick = function(){

        jc('#c1').color('#ffff00').animate({x:200,y:200,radius:5},2000);//{x:200,y:200,radius:5}是一个json,radius表示半径变成5，

    };

};

</script>

</head>

<body>

<canvas id="c1" width="400" height="400"></canvas>

<input type="button" value="点击" id="input1" />

</body>

</html>

h5-9 canvas的更多相关文章

h5标签canvas关于getImageData跨域的问题
h5标签canvas关于getImageData跨域的问题在学习h5的时候,canvas标签中getImageData()报错:security error! 具体代码如下(chrome浏览器): ...
关于h5绘制canvas生成图片的注意点！
1.第一个是关于移动端自适应的问题: 答:如果是最后只要一张canvas生成的图片,而不是要绘制的canvas的图形,则不需要考虑自适应,绘制canvas的时候的宽高,可以直接写成UI提供的图的大小, ...
关于H5的Canvas
1.什么是canvas? <canvas>标签是h5新增的,通过脚本(通常是js)来绘制图形,canvas只是一个图形容器,或者说是画布. canvas可以绘制路径.图形.字以及添加图像. ...
HTML5 Canvas绘图基本使用方法, H5使用Canvas绘图
Canvas 是H5的一部分,允许脚本语言动态渲染图像.Canvas 定义一个区域,可以由html属性定义该区域的宽高,javascript代码可以访问该区域,通过一整套完整的绘图功能(API),在网 ...
H5使用Canvas绘图
一.什么是Canvas Canvas 是H5的一部分,允许脚本语言动态渲染图像.Canvas 定义一个区域,可以由html属性定义该区域的宽高,javascript代码可以访问该区域,通过一整套完整的 ...
用H5的canvas做时钟
<!doctype html><html> <head> <meta charset="UTF-8"> <title>D ...
H5 认识canvas
不同于SVG,HTML中的元素canvas只支持一种原生的图形绘制:矩形.所有其他的图形的绘制都至少需要生成一条路径.不过,我们拥有众多路径生成的方法让复杂图形的绘制成为了可能. canvas提供了三 ...
H5标签-canvas实现颜色拾取功能
HTML5 <canvas> 标签是用于绘制图像,不过,<canvas> 元素本身并没有绘制能力(它仅仅是图形的容器),必须使用脚本(通常是 JS)来完成实际的绘图任务. &l ...
H5之canvas简单入门
<canvas></canvas>是html5出现的新标签,像所有的dom对象一样它有自己本身的属性.方法和事件,其中就有绘图的方法,js能够调用它来进行绘图 <canv ...
H5的canvas绘图技术
canvas元素是HTML5中新添加的一个元素,该元素是HTML5中的一个亮点.Canvas元素就像一块画布,通过该元素自带的API结合JavaScript代码可以绘制各种图形和图像以及动画效果. 1 ...

随机推荐

SQLServer 使用变量动态行转列
drop table #testcreate table #test( id int identity(1,1) primary key, bizDate varchar(50), ...
mysql数据库之存储过程入门
引用:百度百科存储过程存储过程(Stored Procedure)是在大型数据库系统中,一组为了完成特定功能的SQL 语句集,存储在数据库中,经过第一次编译后再次调用不需要再次编译,用户通过指定存 ...
list用法(用到了再补充)
之前学list吧,也知道很多,但是到用的时候却无从下手,还是不熟悉的缘故,看来基础知识应该再加强,要达到信手拈来的程度才行. 先说下list的特性:有序可重复,也可以存储多个空值. 我用到的方法: L ...
【python】random
1.random 和其他语言一样,返回大于等于0.小于1的浮点数 2.uniform(a,b) 返回大于等于a.小于等于b的浮点数 3.randint(a,b) 这个很好理解,返回一个介于a和b之间的 ...
VR: AR和VR演进哲学
Facebook 20亿美元(4亿美元+16亿美元股票换购方式)收购虚拟现实厂商Oculus 引爆AR产业,索尼不温不火逐步演进的头盔项目也该加速了.最近Oculus rift发布了商业版本:Ocul ...
Shell 环境变量也是变量
跟定义普通变量一样,语法是变量名=值,只不过这个名字叫 PATH,值是路径 shell PATH=/usr/local/python-2.7.6/bin 导入的话使用export命令 shell e ...
webpack学习（五）—webpack+react+es6（第1篇）
如果你看过webpack学习系列的前一个文章,接下来做的东西会比较简单 :webpack学习(四)— webpack-dev-server react发展的很快,现在大部分开发react相关的项目,都 ...
【转】虚拟化（一）：虚拟化及vmware产品介绍
由于公司最近在做虚拟化监控,因此就需要把虚拟化方面的知识给学习总结一下,对于虚拟化的概念,摘自百度百科,如下: 虚拟化,是指通过虚拟化技术将一台计算机虚拟为多台逻辑计算机.在一台计算机 ...
用Python获取摄像头并实时控制人脸
实现流程从摄像头获取视频流,并转换为一帧一帧的图像,然后将图像信息传递给opencv这个工具库处理,返回灰度图像(就像你使用本地静态图片一样) 程序启动后,根据监听器信息,使用一个while循环,不断 ...
mapbox 支持国家2000 坐标系的数据
最近有个项目使用mapbox作为地图展示,但是mapbox 只支持web 墨卡托(3857)坐标系的数据.而客户想接入其他单位发布的共享数据,共享数据都是基于arcgisserver 发布的国家200 ...

h5-9 canvas

h5-9 canvas的更多相关文章

随机推荐

热门专题