html 复制canvas,HTML_html5 canvas 使用示例 ，复制代码代码如下:<!DOCTYPE HT - phpStudy

html5 canvas 使用示例

复制代码代码如下:

HTML5示例

#container{border:1px solid #ccc;width:800px;height:600px;position:relative;}

canvas{position:absolute;top:0px;left:0px;z-index:1;}

铅笔

直线

矩形

圆形

椭圆

var canvas = document.getElementById('canvas');

var context = canvas.getContext('2d');

var _canvas = document.getElementById('canvas_temp');

var _context = _canvas.getContext('2d');

var tools= document.getElementById('tools');

tools.onchange = function (e){

tool[this.value]();

};

var tool = {

pen:function (){

this.reset();

_canvas.οnmοusedοwn=function (e){

_context.moveTo(e.layerX,e.layerY);

_canvas.οnmοusemοve=function (e){

_context.lineTo(e.layerX,e.layerY);

_context.stroke();

};

_canvas.οnmοuseup=function (e){

_canvas.οnmοusemοve=null;

_canvas.οnmοuseup=null;

tool.updata();

};

};

},

line:function (){

this.reset();

_canvas.οnmοusedοwn=function (e){

var _e = e;

_canvas.οnmοusemοve=function (e){

_context.clearRect(0,0,canvas.width,canvas.height);

_context.beginPath();

_context.moveTo(_e.layerX,_e.layerY);

_context.lineTo(e.layerX,e.layerY);

_context.stroke();

_context.closePath();

};

_canvas.οnmοuseup=function (e){

_canvas.οnmοusemοve=null;

_canvas.οnmοuseup=null;

tool.updata();

};

}

},

rect:function (){

this.reset();

_canvas.οnmοusedοwn=function (e){

var _e = e;

_context.strokeStyle="#000";

_canvas.οnmοusemοve=function (e){

_context.clearRect(0,0,canvas.width,canvas.height);

_context.strokeRect(_e.layerX,_e.layerY,e.layerX-_e.layerX,e.layerY-_e.layerY);

};

_canvas.οnmοuseup=function (e){

_canvas.οnmοusemοve=null;

_canvas.οnmοuseup=null;

tool.updata();

};

}

},

circle:function (){

this.reset();

_canvas.οnmοusedοwn=function (e){

var _e = e;

_canvas.οnmοusemοve=function (e){

_context.clearRect(0,0,canvas.width,canvas.height);

_context.beginPath();

_context.arc(_e.layerX,_e.layerY,e.layerX-_e.layerX,0,Math.PI*2,true);

_context.stroke();

_context.closePath();

};

_canvas.οnmοuseup=function (e){

_canvas.οnmοusemοve=null;

_canvas.οnmοuseup=null;

tool.updata();

};

}

},

ellipse:function (){

this.reset();

_canvas.οnmοusedοwn=function (e){

var _e = e;

_canvas.οnmοusemοve=function (e){

var st=0;

_context.clearRect(0,0,canvas.width,canvas.height);

_context.beginPath();

_context.moveTo(_e.layerX+(e.layerX-_e.layerX)*Math.cos(st), _e.layerY+(e.layerX-_e.layerX)*Math.sin(st));

st+=1/180*Math.PI;

for(var i=0;i<360;i++){

_context.lineTo(_e.layerX+(e.layerX-_e.layerX)*Math.cos(st),_e.layerY+(e.layerY-_e.layerY)*Math.sin(st));

st+=1/180*Math.PI;

}

_context.stroke();

_context.closePath();

};

_canvas.οnmοuseup=function (e){

_canvas.οnmοusemοve=null;

_canvas.οnmοuseup=null;

tool.updata();

};

}

},

reset:function (){

_canvas.οnmοusedοwn=null;

_canvas.οnmοuseup=null;

_canvas.οnmοusemοve=null;

},

updata:function (){

context.drawImage(_canvas, 0, 0);

_context.clearRect(0, 0, canvas.width, canvas.height);

}

};

tool['pen']();

相关阅读:

30个开发人员有用的CSS代码片段整理值得借鉴

JavaScript获取路径设计源码

Windows7如何设置UAC弹出提示时屏幕不变暗

基于mysql时间处理函数的应用详解

fedora8 linux挂载DVD光盘或ISO镜像为源的方法

微软VS苹果 桌面操作系统的的终极对比

Linux调整系统inode数量实例

iOS开发中常见的解析XML的类库以及简要安装方法

Android 使用Vitamio打造自己的万能播放器(10)—— 本地播放 (缩略图、视频信息、视频扫描服务)

通过javascript把图片转化为字符画

Win10 Mobile正式版全新Aero毛玻璃特效概念图曝光

Android获取手机电池电量用法实例

Linux系统下安装mosh来远程连接另一台Linux主机

Win10预览版10014版Spartan浏览器截图曝光