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对象和DOM对象的相互转化实现代码
Mar 02 Javascript
jquery+ashx无刷新GridView数据显示插件(实现分页、排序、过滤功能)
Apr 25 Javascript
juqery 学习之三 选择器 简单 内容
Nov 25 Javascript
javascript 进阶篇2 CSS XML学习
Mar 14 Javascript
javascript中日期转换成时间戳的小例子
Mar 21 Javascript
如何在一个页面显示多个百度地图
Apr 07 Javascript
jQuery中removeAttr()方法用法实例
Jan 05 Javascript
javascript用正则表达式过滤空格的实现代码
Jun 14 Javascript
浅谈js中的三种继承方式及其优缺点
Aug 10 Javascript
浅述节点的创建及常见功能的实现
Dec 15 Javascript
详解angularJs模块ui-router之状态嵌套和视图嵌套
Apr 28 Javascript
vue-image-crop基于Vue的移动端图片裁剪组件示例
Aug 28 Javascript
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中上传大体积文件时需要的设置
2006/10/09 PHP
动态新闻发布的实现及其技巧
2006/10/09 PHP
2014最热门的24个php类库汇总
2014/12/18 PHP
php天翼开放平台短信发送接口实现方法
2014/12/22 PHP
PHP实现活动人选抽奖功能
2017/04/19 PHP
PHP实现的迪科斯彻(Dijkstra)最短路径算法实例
2017/09/16 PHP
懒就要懒到底——鼠标自动点击(含时间判断)
2007/02/20 Javascript
基于jQuery的树控件实现代码(asp.net+json)
2010/07/11 Javascript
设置iframe的document.designMode后仅Firefox中其body.innerHTML为br
2012/02/27 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
2013/08/12 Javascript
浅谈javascript中自定义模版
2015/01/29 Javascript
JS实现仿雅虎首页快捷登录入口及导航模块效果
2015/09/19 Javascript
Bootstrap源码解读排版(1)
2016/12/23 Javascript
Vue2学习笔记之请求数据交互vue-resource
2017/02/23 Javascript
jQuery日期范围选择器附源码下载
2017/05/23 jQuery
JavaScript判断变量名是否存在数组中的实例
2017/12/28 Javascript
Vue vm.$attrs使用场景详解
2020/03/08 Javascript
微信h5静默和非静默授权获取用户openId的方法和步骤
2020/06/08 Javascript
vue 在methods中调用mounted的实现操作
2020/08/07 Javascript
[01:32]dota2拉比克至宝(222)
2018/12/20 DOTA
python格式化字符串实例总结
2014/09/28 Python
Python选课系统开发程序
2016/09/02 Python
python实现简单爬虫功能的示例
2016/10/24 Python
Python检测网络延迟的代码
2018/05/15 Python
Python实现基于POS算法的区块链
2018/08/07 Python
python如何读取bin文件并下发串口
2019/07/05 Python
Python协程操作之gevent(yield阻塞,greenlet),协程实现多任务(有规律的交替协作执行)用法详解
2019/10/14 Python
ProBikeKit澳大利亚:自行车套件,跑步和铁人三项装备
2016/11/30 全球购物
员工工作表扬信范文
2014/01/13 职场文书
销售主管岗位职责
2014/02/08 职场文书
我的中国梦演讲稿300字
2014/08/19 职场文书
2015年教师节感言
2015/08/03 职场文书
创业计划书之o2o水果店
2019/08/30 职场文书
Python实战之实现简易的学生选课系统
2021/05/25 Python
SQL Server表分区降低运维和维护成本
2022/04/08 SQL Server
分析MySQL优化 index merge 后引起的死锁
2022/04/19 MySQL