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 相关文章推荐
jquery实现的可隐藏重现的靠边悬浮层实例代码
May 27 Javascript
js页面跳转的常用方法整理
Oct 18 Javascript
javascript通过navigator.userAgent识别各种浏览器
Oct 25 Javascript
jquery和雅虎的yql服务实现天气预报服务示例
Feb 08 Javascript
node.js中的fs.chown方法使用说明
Dec 16 Javascript
javascript弹出页面回传值的方法
Jan 28 Javascript
快速掌握Node.js事件驱动模型
Mar 21 Javascript
JS获取当前页面名称的简单实例
Aug 19 Javascript
JavaScript ES6中的简写语法总结与使用技巧
Dec 30 Javascript
原生js+ajax分页组件
Jan 30 Javascript
ESLint 是如何检查 .vue 文件的
Nov 30 Vue.js
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
Mar 31 jQuery
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
Pain 全世界最小最简单的PHP模板引擎 (普通版)
2011/10/23 PHP
php define的第二个参数使用方法
2013/11/04 PHP
PHP 如何获取二维数组中某个key的集合
2014/06/03 PHP
php set_include_path函数设置 include_path 配置选项
2016/10/30 PHP
PHP测试框架PHPUnit组织测试操作示例
2018/05/28 PHP
php设计模式之备忘模式分析【星际争霸游戏案例】
2020/03/24 PHP
jQuery 位置插件
2008/12/25 Javascript
Mootools 1.2教程 Tooltips
2009/09/15 Javascript
基于Jquery+Ajax+Json的高效分页实现代码
2011/10/29 Javascript
jquery果冻抖动效果实现方法
2015/01/15 Javascript
jQuery实现点击小图片淡入淡出显示大图片特效
2015/09/09 Javascript
JQuery zClip插件实现复制页面内容到剪贴板
2015/11/02 Javascript
浅谈JS原型对象和原型链
2016/03/02 Javascript
从零学习node.js之express入门(六)
2017/02/25 Javascript
phantomjs导出html到pdf的方法总结
2017/10/19 Javascript
js中this对象用法分析
2018/01/05 Javascript
[04:45]上海特级锦标赛主赛事第三日TOP10
2016/03/05 DOTA
Python contextlib模块使用示例
2015/02/18 Python
Python装饰器用法实例总结
2018/02/07 Python
Python使用Selenium+BeautifulSoup爬取淘宝搜索页
2018/02/24 Python
python3 判断列表是一个空列表的方法
2018/05/04 Python
python实现自主查询实时天气
2018/06/22 Python
python requests指定出口ip的例子
2019/07/25 Python
matplotlib命令与格式之tick坐标轴日期格式(设置日期主副刻度)
2019/08/06 Python
Python爬虫爬取有道实现翻译功能
2020/11/27 Python
深入解析HTML5的IndexedDB索引数据库
2015/09/14 HTML / CSS
台湾母婴用品购物网站:Infant婴之房
2018/06/15 全球购物
澳大利亚和新西兰最大的在线旅行社之一:Aunt Betty
2019/08/07 全球购物
梅西百货官网:Macy’s
2020/08/04 全球购物
雅虎笔试题(字符串操作)
2015/03/24 面试题
生态学毕业生自荐信
2013/10/27 职场文书
代理协议书
2014/04/22 职场文书
单方离婚协议书范本(2014版)
2014/09/30 职场文书
2015年大学宣传部工作总结
2015/05/26 职场文书
给学校的建议书400字
2015/09/14 职场文书
swagger如何返回map字段注释
2021/07/03 Java/Android