JS实现简单的Canvas画图实例


Posted in Javascript onJuly 04, 2013

定义变量:
[javascript]

var startX; 
var startY; 
var endX; 
var endY; 
var radius; 
var canvas = document.getElementById("myCanvas"); 
var context = canvas.getContext("2d"); 
var select = document.getElementsByTagName("select"); 
var startX;
var startY;
var endX;
var endY;
var radius;
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var select = document.getElementsByTagName("select");

函数部分:
[javascript]
window.onload=function() { 
    canvas.onmousedown = function(e) { 
    e = e || event; 
    startX = e.clientX; 
    startY = e.clientY; 
    if(select[0].value == "arc") { 
        canvas.onmousemove = moveShowArc; 
    } else { 
        canvas.onmousemove = moveShowRect; 
    } 
    } 
    canvas.onmouseup = function() { 
    canvas.onmousemove = ""; 
    } 
} 
function moveShowRect(e) { 
    context.clearRect(0, 0, 500, 300); 
    endX = e.clientX - startX; 
    endY = e.clientY - startY; 
    context.beginPath(); 
    context.rect(startX, startY, endX, endY); 
    context.fillStyle = "#8ED6FF"; 
    context.fill(); 
    context.lineWidth = 3; 
    context.strokeStyle = "black"; 
    context.stroke(); 
} 
function moveShowArc(e) { 
    context.clearRect(0, 0, 500, 300); 
    endX = e.clientX - startX; 
    endY = e.clientY - startY; 
    radius = Math.sqrt(Math.pow(endX,2)+Math.pow(endY,2)); 
    context.beginPath(); 
    context.arc(startX, startY,radius,0,2 * Math.PI,false); 
    context.fillStyle = "#8ED6FF"; 
    context.fill(); 
    context.lineWidth = 3; 
    context.strokeStyle = "black"; 
    context.stroke(); 
} 
window.onload=function() {
    canvas.onmousedown = function(e) {
 e = e || event;
 startX = e.clientX;
 startY = e.clientY;
 if(select[0].value == "arc") {
     canvas.onmousemove = moveShowArc;
 } else {
     canvas.onmousemove = moveShowRect;
 }
    }
    canvas.onmouseup = function() {
 canvas.onmousemove = "";
    }
}
function moveShowRect(e) {
    context.clearRect(0, 0, 500, 300);
    endX = e.clientX - startX;
    endY = e.clientY - startY;
    context.beginPath();
    context.rect(startX, startY, endX, endY);
    context.fillStyle = "#8ED6FF";
    context.fill();
    context.lineWidth = 3;
    context.strokeStyle = "black";
    context.stroke();
}
function moveShowArc(e) {
    context.clearRect(0, 0, 500, 300);
    endX = e.clientX - startX;
    endY = e.clientY - startY;
    radius = Math.sqrt(Math.pow(endX,2)+Math.pow(endY,2));
    context.beginPath();
    context.arc(startX, startY,radius,0,2 * Math.PI,false);
    context.fillStyle = "#8ED6FF";
    context.fill();
    context.lineWidth = 3;
    context.strokeStyle = "black";
    context.stroke();
}
Javascript 相关文章推荐
得到文本框选中的文字,动态插入文字的js代码
Mar 07 Javascript
IE iframe的onload方法分析小结
Jan 07 Javascript
通过Javascript将数据导出到外部Excel文档的函数代码
Jun 15 Javascript
jquery中each遍历对象和数组示例
Aug 05 Javascript
javascript实现单击和双击并存的方法
Dec 13 Javascript
jQuery实现在textarea指定位置插入字符或表情的方法
Mar 11 Javascript
Vue.js每天必学之Class与样式绑定
Sep 05 Javascript
微信小程序数据存储与取值详解
Jan 30 Javascript
element上传组件循环引用及简单时间倒计时的实现
Oct 01 Javascript
JS代码屏蔽F12,右键,粘贴,复制,剪切,选中,操作实例
Sep 17 Javascript
Node.js API详解之 net模块实例分析
May 18 Javascript
vue + el-form 实现的多层循环表单验证
Nov 25 Vue.js
Jquery获取复选框被选中值的简单方法
Jul 04 #Javascript
jquery和javascript的区别(常用方法比较)
Jul 04 #Javascript
JS定时刷新页面及跳转页面的方法
Jul 04 #Javascript
浏览器打开层自动缓慢展开收缩实例代码
Jul 04 #Javascript
深入解析contentWindow, contentDocument
Jul 04 #Javascript
关于Javascript与iframe的那些事儿
Jul 04 #Javascript
如何使用Javascript正则表达式来格式化XML内容
Jul 04 #Javascript
You might like
一步一步学习PHP(7) php 字符串相关应用
2010/03/05 PHP
使用XDebug调试及单元测试覆盖率分析
2011/01/27 PHP
php列出一个目录下的所有文件的代码
2012/10/09 PHP
PHP二进制与字符串之间的相互转换教程
2016/10/14 PHP
用JavaScript获取网页中的js、css、Flash等文件
2006/12/20 Javascript
基于jQuery制作迷你背词汇工具
2010/07/27 Javascript
jQuery判断checkbox是否选中的小例子
2013/12/02 Javascript
深入理解jQuery layui分页控件的使用
2016/08/17 Javascript
Vue.js实战之组件的进阶
2017/04/04 Javascript
解决v-for中使用v-if或者v-bind:class失效的问题
2018/09/25 Javascript
node.js实现简单的压缩/解压缩功能示例
2019/11/05 Javascript
electron 如何将任意资源打包的方法步骤
2020/04/16 Javascript
vue实现移动端H5数字键盘组件使用详解
2020/08/25 Javascript
[01:02:48]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 LGD vs OG
2018/04/02 DOTA
[48:32]VGJ.T vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[01:38]完美世界DOTA2联赛(PWL)宣传片:第一站
2020/10/26 DOTA
[01:01:52]完美世界DOTA2联赛PWL S2 GXR vs Magma 第二场 11.25
2020/11/26 DOTA
Python 多线程抓取图片效率对比
2016/02/27 Python
Python实现更改图片尺寸大小的方法(基于Pillow包)
2016/09/19 Python
Python正则表达式知识汇总
2017/09/22 Python
用python简单实现mysql数据同步到ElasticSearch的教程
2018/05/30 Python
对python中数组的del,remove,pop区别详解
2018/11/07 Python
Python基于当前时间批量创建文件
2020/05/07 Python
keras的ImageDataGenerator和flow()的用法说明
2020/07/03 Python
Numpy实现卷积神经网络(CNN)的示例
2020/10/09 Python
纯CSS3实现圆圈动态发光特效动画的示例代码
2021/03/08 HTML / CSS
Needle & Thread官网:英国仙女品牌
2018/01/13 全球购物
初三学生评语大全
2014/04/24 职场文书
查摆问题自查报告范文
2014/10/13 职场文书
储备店长岗位职责
2015/04/14 职场文书
2015年司法所工作总结
2015/04/27 职场文书
信息技术教研组工作总结
2015/08/13 职场文书
如何用Laravel包含你自己的帮助函数
2021/05/27 PHP
使用canvas对video视频某一刻截图功能
2021/09/25 HTML / CSS
如何在Python中妥善使用进度条详解
2022/04/05 Python
Oracle 11g数据库使用expdp每周进行数据备份并上传到备份服务器
2022/06/28 Oracle