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的值(实例代码)
Nov 04 Javascript
JS匀速运动演示示例代码
Nov 26 Javascript
Javascript中常见的校验如域名、手机、邮箱等等
Jan 02 Javascript
JS中数组Array的用法示例介绍
Feb 20 Javascript
js的Prototype属性解释及常用方法
May 08 Javascript
JavaScript中常用的六种互动方法示例
Mar 13 Javascript
浅析JavaScript动画
Jun 10 Javascript
AngularJS上拉加载问题解决方法
May 23 Javascript
jQuery为某个div加入行样式
Jun 09 jQuery
原生js实现form表单序列化的方法
Aug 02 Javascript
vue 实现左右拖拽元素并且不超过他的父元素的宽度
Nov 30 Javascript
Vue代码整洁之去重方法整理
Aug 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
利用php输出不同的心形图案
2016/04/22 PHP
php实现留言板功能(代码详解)
2017/03/28 PHP
验证用户是否修改过页面的数据的实现方法
2008/09/26 Javascript
学习ExtJS border布局
2009/10/08 Javascript
实现无刷新联动例子汇总
2015/05/20 Javascript
js验证真实姓名与身份证号是否匹配
2015/10/13 Javascript
Windows 系统下设置Nodejs NPM全局路径
2016/04/26 NodeJs
jquery UI Datepicker时间控件的使用及问题解决
2016/04/28 Javascript
Angular 4依赖注入学习教程之Injectable装饰器(六)
2017/06/04 Javascript
实现微信小程序的wxml文件和wxss文件在webstrom的支持
2017/06/12 Javascript
微信小程序实现MUI数字输入框效果
2018/01/31 Javascript
Node.js Buffer模块功能及常用方法实例分析
2019/01/05 Javascript
antd vue table跨行合并单元格,并且自定义内容实例
2020/10/28 Javascript
[01:39]2014DOTA2国际邀请赛 Newbee经理CU专访队伍火力全开
2014/07/15 DOTA
Python面向对象编程中的类和对象学习教程
2015/03/30 Python
Python中django学习心得
2017/12/06 Python
对matplotlib改变colorbar位置和方向的方法详解
2018/12/13 Python
python3 自动打印出最新版本执行的mysql2redis实例
2020/04/09 Python
Python爬虫中Selenium实现文件上传
2020/12/04 Python
利用CSS3实现炫酷的飞机起飞动画
2016/09/17 HTML / CSS
详解HTML5布局和HTML5标签
2020/10/26 HTML / CSS
Emporio Armani腕表天猫官方旗舰店:乔治·阿玛尼为年轻人设计的副线品牌
2017/07/02 全球购物
Beach Bunny Swimwear官网:设计师泳装和性感比基尼
2019/03/13 全球购物
莫斯科大型旅游休闲商品超市:Camping.ru
2020/09/16 全球购物
伊莱克斯阿根廷网上商店:Tienda Electrolux
2021/03/08 全球购物
中学家长会邀请函
2014/02/03 职场文书
《找不到快乐的波斯猫》教学反思
2014/02/24 职场文书
大学军训感言200字
2014/02/26 职场文书
暖通工程师岗位职责
2014/06/12 职场文书
2014年连锁店圣诞节活动方案
2014/12/09 职场文书
丽江古城导游词
2015/02/03 职场文书
欢送会主持词
2015/07/01 职场文书
保护动物的宣传语
2015/07/13 职场文书
中考百日冲刺决心书
2015/09/22 职场文书
工作建议书范文
2019/07/08 职场文书
导游词之临安白水涧
2019/11/05 职场文书