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中:checkbox选择器用法实例
Jan 03 Javascript
常用的JavaScript WEB操作方法分享
Feb 28 Javascript
TypeScript 学习笔记之基本类型
Jun 19 Javascript
JS+CSS实现大气清新的滑动菜单效果代码
Oct 22 Javascript
js利用正则表达式检验输入内容是否为网址
Jul 05 Javascript
BootStrap表单时间选择器详解
May 09 Javascript
详解webpack 多页面/入口支持&公共组件单独打包
Jun 29 Javascript
浅谈JavaScript find 方法不支持IE的问题
Sep 28 Javascript
JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法示例
Jul 27 Javascript
Vue2.x通用编辑组件的封装及应用详解
May 28 Javascript
JS字符串常用操作方法实例小结
Jun 24 Javascript
JavaScript 继承 封装 多态实现及原理详解
Jul 29 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
Zend的Registry机制的使用说明
2013/05/02 PHP
神盾加密解密教程(二)PHP 神盾解密
2014/06/08 PHP
PHP下通过QRCode类库创建中间带网站LOGO的二维码
2014/07/12 PHP
php筛选不存在的图片资源
2015/04/28 PHP
php实现微信模拟登陆、获取用户列表及群发消息功能示例
2017/06/28 PHP
PHP实现的数组和XML文件相互转换功能示例
2018/03/15 PHP
PHP count_chars()函数讲解
2019/02/14 PHP
一个不错的用JavaScript实现的UBB编码函数
2007/03/09 Javascript
JQuery 1.6发布 性能提升,同时包含大量破坏性变更
2011/05/10 Javascript
Jquery 自定义动画概述及示例
2013/03/29 Javascript
javascript中expression的用法整理
2014/05/13 Javascript
js实现鼠标感应向下滑动隐藏菜单的方法
2015/02/20 Javascript
Angular Js文件上传之form-data
2015/08/28 Javascript
vue+mockjs模拟数据实现前后端分离开发的实例代码
2017/08/08 Javascript
Angular 容器部署的方法
2018/04/17 Javascript
Angular5.0 子组件通过service传递值给父组件的方法
2018/07/13 Javascript
浅谈Vue.js 中的 v-on 事件指令的使用
2018/11/25 Javascript
一些你可能不熟悉的JS知识点总结
2019/03/15 Javascript
Vue.js实现备忘录功能
2019/06/26 Javascript
jquery插件实现轮播图效果
2020/10/19 jQuery
[49:08]FNATIC vs Infamous 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
Django在Win7下的安装及创建项目hello word简明教程
2014/07/14 Python
python实现简单点对点(p2p)聊天
2017/09/13 Python
关于python多重赋值的小问题
2019/04/17 Python
python实现最小二乘法线性拟合
2019/07/19 Python
pytorch中的自定义数据处理详解
2020/01/06 Python
Python用dilb提取照片上人脸的示例
2020/10/26 Python
移动端HTML5 input常见问题(小结)
2020/09/28 HTML / CSS
迪卡侬英国官网:Decathlon英国
2017/04/08 全球购物
Pureology官网:为染色头发打造最好的产品
2019/09/13 全球购物
法院实习人员自我鉴定
2013/09/26 职场文书
工厂车间标语
2014/06/19 职场文书
建筑施工安全责任书
2014/07/24 职场文书
作风转变年心得体会
2014/10/22 职场文书
sql查询结果列拼接成逗号分隔的字符串方法
2021/05/25 SQL Server
输入框跟随文字内容适配宽实现示例
2022/08/14 Javascript