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 相关文章推荐
javascript 运算数的求值顺序
Aug 23 Javascript
用JavaScript修改CSS属性的代码
May 06 Javascript
js设置document.domain实现跨域的注意点分析
May 21 Javascript
jQuery根据用户电脑是mac还是pc加载对应样式的方法
Jun 26 Javascript
小议JavaScript中Generator和Iterator的使用
Jul 29 Javascript
javascript设计模式之模块模式学习笔记
Feb 15 Javascript
如何正确理解javascript的模块化
Mar 02 Javascript
Linux CentOS系统下安装node.js与express的方法
Apr 01 Javascript
详解Vue双向数据绑定原理解析
Sep 11 Javascript
Angular2使用vscode断点调试ts文件的方法
Dec 13 Javascript
create-react-app修改为多页面支持的方法
May 17 Javascript
extjs图形绘制之饼图实现方法分析
Mar 06 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
微信公众平台开发-微信服务器IP接口实例(含源码)
2017/03/05 PHP
php的扩展写法总结
2019/05/14 PHP
基于PHP的微信公众号的开发流程详解
2020/08/07 PHP
javascript 仿QQ滑动菜单效果代码
2010/09/03 Javascript
js去除重复字符串两种实现方法
2013/01/09 Javascript
jquery实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换
2013/07/01 Javascript
jquery中对于批量deferred的处理方法
2014/01/22 Javascript
JS基于Ajax实现的网页Loading效果代码
2015/10/27 Javascript
全面解析Bootstrap表单使用方法(表单控件状态)
2015/11/24 Javascript
web前端开发upload上传头像js示例代码
2016/10/22 Javascript
jQuery插件echarts实现的单折线图效果示例【附demo源码下载】
2017/03/04 Javascript
JS实现问卷星自动填问卷脚本并在两秒自动提交功能
2020/06/17 Javascript
Vue学习之组件用法实例详解
2020/01/06 Javascript
python开发的小球完全弹性碰撞游戏代码
2013/10/15 Python
windows系统下Python环境搭建教程
2017/03/28 Python
Python Xml文件添加字节属性的方法
2018/03/31 Python
对Python中列表和数组的赋值,浅拷贝和深拷贝的实例讲解
2018/06/28 Python
Linux系统(CentOS)下python2.7.10安装
2018/09/26 Python
python简易实现任意位数的水仙花实例
2018/11/13 Python
python实现感知机线性分类模型示例代码
2019/06/02 Python
python生成任意频率正弦波方式
2020/02/25 Python
Tensorflow安装问题: Could not find a version that satisfies the requirement tensorflow
2020/04/20 Python
Django框架配置mysql数据库实现过程
2020/04/22 Python
OpenCV Python实现图像指定区域裁剪
2021/03/12 Python
新西兰最大的天然保健及护肤品网站:HealthPost(直邮中国)
2021/02/13 全球购物
信息专业本科生个人的自我评价
2013/10/28 职场文书
管理工程专业求职信
2014/08/10 职场文书
2014小学语文教师个人工作总结
2014/12/03 职场文书
万里长城导游词
2015/01/30 职场文书
2015年数学教研组工作总结
2015/05/23 职场文书
2019个人工作自我评价范文(3篇)
2019/09/19 职场文书
MySQL入门命令之函数-单行函数-流程控制函数
2021/04/05 MySQL
教你解决往mysql数据库中存入汉字报错的方法
2021/05/06 MySQL
Python读写yaml文件
2022/03/20 Python
Windows server 2012搭建FTP服务器
2022/04/29 Servers
Golang 入门 之url 包
2022/05/04 Golang