<!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的更多相关文章

  1. h5标签canvas关于getImageData跨域的问题

    h5标签canvas关于getImageData跨域的问题 在学习h5的时候,canvas标签中getImageData()报错:security error! 具体代码如下(chrome浏览器): ...

  2. 关于h5绘制canvas生成图片的注意点!

    1.第一个是关于移动端自适应的问题: 答:如果是最后只要一张canvas生成的图片,而不是要绘制的canvas的图形,则不需要考虑自适应,绘制canvas的时候的宽高,可以直接写成UI提供的图的大小, ...

  3. 关于H5的Canvas

    1.什么是canvas? <canvas>标签是h5新增的,通过脚本(通常是js)来绘制图形,canvas只是一个图形容器,或者说是画布. canvas可以绘制路径.图形.字以及添加图像. ...

  4. HTML5 Canvas绘图基本使用方法, H5使用Canvas绘图

    Canvas 是H5的一部分,允许脚本语言动态渲染图像.Canvas 定义一个区域,可以由html属性定义该区域的宽高,javascript代码可以访问该区域,通过一整套完整的绘图功能(API),在网 ...

  5. H5使用Canvas绘图

    一.什么是Canvas Canvas 是H5的一部分,允许脚本语言动态渲染图像.Canvas 定义一个区域,可以由html属性定义该区域的宽高,javascript代码可以访问该区域,通过一整套完整的 ...

  6. 用H5的canvas做时钟

    <!doctype html><html> <head> <meta charset="UTF-8"> <title>D ...

  7. H5 认识canvas

    不同于SVG,HTML中的元素canvas只支持一种原生的图形绘制:矩形.所有其他的图形的绘制都至少需要生成一条路径.不过,我们拥有众多路径生成的方法让复杂图形的绘制成为了可能. canvas提供了三 ...

  8. H5标签-canvas实现颜色拾取功能

    HTML5 <canvas> 标签是用于绘制图像,不过,<canvas> 元素本身并没有绘制能力(它仅仅是图形的容器),必须使用脚本(通常是 JS)来完成实际的绘图任务. &l ...

  9. H5之canvas简单入门

    <canvas></canvas>是html5出现的新标签,像所有的dom对象一样它有自己本身的属性.方法和事件,其中就有绘图的方法,js能够调用它来进行绘图 <canv ...

  10. H5的canvas绘图技术

    canvas元素是HTML5中新添加的一个元素,该元素是HTML5中的一个亮点.Canvas元素就像一块画布,通过该元素自带的API结合JavaScript代码可以绘制各种图形和图像以及动画效果. 1 ...

随机推荐

  1. html中canvas渲染图片,并转化成base64格式保存

    最近在做一个上传头像然后保存显示的功能,因为涉及到裁剪大小和尺寸比例,所以直接上传图片再展示的话,就会出现问题,所以就想用canvas来渲染裁剪后的图片,然后转化成base64格式的图片再存储,这样取 ...

  2. WPF播放器

    最近由于工作需要,需要做一个播放软件,在网上参考了很多例子,园子里有很多代码.其中最多的就是wpf自带的MediaElement控件,或者VLC视频播放器. 先附我自己查询资料的链接: MediaEm ...

  3. jsp页面导入excel文件的步骤及配置

    上传使用flash插件 需要jquery.uploadify.min.js,uploadify.css,poi-ooxml-3.8-20120326.jar等 jsp页面: <%@include ...

  4. 时间框的属性编辑(WdatePicker日期插件)

    效果图如下:可以设置输入的时间不大于,或不小于某日. //引用js包 <script type="text/javascript" src="${basePath} ...

  5. HTML+CSS(11)

    n  CSS背景属性 Background-color:背景色. Background-image:背景图片地址.如:background-image:url(images/bg.gif;) Back ...

  6. C#调用Java的WebService出现500 服务器错误

    最近在用C#调用Java写的WebService时,发现老是返回500 服务器错误,到底什么原因一直找不出来, 后来google了以后,找到国外的http://stackoverflow.com站点已 ...

  7. (转)基于MVC4+EasyUI的Web开发框架经验总结(10)--在Web界面上实现数据的导入和导出

    http://www.cnblogs.com/wuhuacong/p/3873498.html 数据的导入导出,在很多系统里面都比较常见,这个导入导出的操作,在Winform里面比较容易实现,我曾经在 ...

  8. pycharm主题 变量颜色 自定义

    File--Settings--Edtior--Color Schame-- Lanuage Defaults

  9. Having子句用法

    Having基础用法 集合结果指定条件 注:HAVING子句中能够使用三种要素:常数,聚合函数,GROUP BY子句中指定的列名(聚合建) HAVING子句: 用having就一定要和group by ...

  10. 自定义View实现拖动小圆球,并随机改变其颜色

    //简单实现package com.example.demo1; import android.content.Context;import android.graphics.Canvas;impor ...