h5-9 canvas
2016-04-06 13:22
375 查看
<!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-8 canvas
- h5-7 canvas
- h5-6 canvas
- h5-5 canvas
- h5-4 canvas
- h5-3
- HTML4 和 HTML5 的10个关键区别
- H5 localStorge
- HTML5 文件操作API
- h5-2
- HTML5-新特性
- html5拖拉
- h5 -1
- HTML5+CSS3 loading 效果收集－－转载
- 2016年最火的15款HTML5游戏引擎
- 非常优秀的8个HTML5前端框架
- ajax与HTML5 history pushState/replaceState实例
- Web开发者不容错过的10个HTML5工具
- 设计师必看的10个HTML5动画工具
- HTML5游戏实战之拼图游戏（包含关卡）