java 画多边形_javascript绘制一个多边形
我想用纯Javascript语言通过鼠标处理程序在画布上绘制很多多边形 . 我的项目是here . 在我的项目中:
我想完成绘制并在双击时创建一个多边形 . (我可以) . 通过一次单击事件开始绘制以创建新多边形 . (我不能) .
当我开始新的绘制时,在制作前向多边形添加新点 . 谢谢 .
我的html文件在这里:
Orhan ALTIN
canvas{
border: 5px solid;
border-color: rgb(255,173,50);
}
var tuval = document.getElementById("tuval");
var kaynak = tuval.getContext("2d");
var simdiX=[];
var simdiY=[];
var sonraX=[];
var sonraY=[];
var cizgiler=[];
var cizgi={
x1:0,
y1:0
};
var bas=0;
var fare={
xx:0,
yy:0
};
var cevre=tuval.getBoundingClientRect();
var cizimyap=false;
var yeni=0;
tuval.addEventListener("click",function temizle(olay){
cizimyap=true;
fare={
xx:olay.clientX-cevre.left,
yy:olay.clientY-cevre.top
};
cizgi.x1=fare.xx;
cizgi.y1=fare.yy;
bas=bas+1;
kaynak.moveTo(fare.xx,fare.yy);
bas++;
if(bas>1){
cizgiler.push({
xx1:cizgi.x1,
yy1:cizgi.y1,
xx2:cizgi.x2,
yy2:cizgi.y2
});
}
tuval.addEventListener("mousemove", function oynat(olay){
if (cizimyap) {
kaynak.clearRect(0,0,tuval.width,tuval.height);
kaynak.beginPath();
for (var i = 0, max = cizgiler.length; i < max; i++) {
var dizi=cizgiler[i];
kaynak.moveTo(dizi.xx2,dizi.yy2);
kaynak.lineTo(dizi.xx1,dizi.yy1);
kaynak.stroke();
simdiX.push(dizi.xx1);
simdiY.push(dizi.yy1);
}
kaynak.moveTo(fare.xx,fare.yy);
kaynak.lineTo(olay.clientX-cevre.left,olay.clientY-cevre.top);
kaynak.stroke();
}
});
tuval.addEventListener("dblclick", function(){
cizimyap=false;
poligonYap(olay);
});
});
function poligonYap(olay){
simdiX.splice(simdiX.length-1,1,simdiX[0]);
simdiY.splice(simdiY.length-1,1,simdiY[0]);
kaynak.clearRect(0,0,tuval.width,tuval.height);
for (var i = 0, max = cizgiler.length; i < max; i++) {
//var dizi=cizgiler[i];
kaynak.strokeStyle="green";
kaynak.lineWidth="1";
kaynak.lineCap="round";
sonraX[i]=simdiX[i];
sonraY[i]=simdiY[i];
kaynak.lineTo(sonraX[i],sonraY[i]);
kaynak.stroke();
}
for (var i = 0, max = cizgiler.length-1; i < max; i++) {
kaynak.fillStyle="blue";
kaynak.fillRect(cizgiler[i].xx1-5/2,cizgiler[i].yy1-5/2,5,5);
kaynak.font="12px Tahoma";
kaynak.fillStyle="red";
kaynak.fillText(i+1,cizgiler[i].xx1,cizgiler[i].yy1-5);
}
}
java 画多边形_javascript绘制一个多边形相关推荐
- R语言使用rnorm函数生成正太分布数据、使用plot函数生成画布、设定轴标签、设定轴范围、轴标题、使用locator函数将图像进入定位模式、在画布内手动绘制一个多边形
R语言使用rnorm函数生成正太分布数据.使用plot函数生成画布.设定轴标签.设定轴范围.轴标题.使用locator函数将图像进入定位模式.在画布内手动绘制一个多边形 目录 R语言使用rnorm函数 ...
- 用java画企鹅_Fireworks绘制简笔QQ企鹅图像
这里我们使用Fireworks绘制一幅简笔QQ企鹅图像,这里主要熟悉一下工具箱上椭圆.选择.缩放等工具的使用,看看如何通过它们绘制简单的卡通效果.好了,下面我们一起来学习吧! 绘制过程: (1)新建一 ...
- java填充多边形_JAVA绘制填充多边形输出文字保存成图片的示例
/** * 生成五边形用的函数 * @param dstImg,输出图片文件名称 * @param v1,有效值为0-4 * @param v2,有效值为0-4 * @param v3,有效值为0-4 ...
- Java实验8 T6.绘制一个二叉树
文章目录 题目要求 Java代码 运行结果 题目要求 绘制如下形式的一个二叉树 Java代码 package text8;import javax.imageio.ImageIO; import ja ...
- java 画星星_Java——绘制五角星
Java2D支持通过GeneralPath实现绘制任意的几何形状. 步骤:1)实例化GeneralPath对象 2)调用moveTo()方法锚地开始点坐标 3)调用lineTo()或curveTo() ...
- JAVA画色盲图_一个色盲竟然能画出这么精美的色彩...
点点一直觉得装饰画对于色彩的的搭配 要求非常的高,以及你对色彩的把握能力 看到一个色盲竟然能画出如此精美的图案来 点点也是有点惊呆了 学画画的厉害了 还可以手绘画地毯 丙烯和油墨精心制作的手绘波斯地毯 ...
- 【计算机图形学】实验报告1用OpenGL画线命令绘制一个多边构成图形或场景
#include <GL/glut.h> #include <math.h> const int n = 200; const float R = 0.5; const flo ...
- java画虚线_Java绘制虚线
Java绘制虚线 (2013-03-29 17:07:14) 标签: 绘图 虚线 it DashStroke.java ----------------- import java.awt.*; imp ...
- java画球_canvas绘制3d球体
window.οnlοad=function(){ var R_init=500 var Sum=360/10 //定义12个环形的圈圈 var Sumy=360/10 //纵向也有12个圈圈 var ...
最新文章
- 用户和用户组的简单总结
- ul 、ol li 继承原有样式的问题
- 杨校老师课堂之Java类与对象、封装、构造方法
- 面试官是如何发掘有潜力的产品经理的?
- 程序员应学习蜡笔小新的心态
- 程序员不满薪资拒绝offer,HR怒称:估计你一辈子就是个程序员
- python中存储坐标_利用python进行坐标提取以及筛选(文件操作的小应用)
- 一套完整仿拉勾网HTML静态网页模板(含38个独立HTML)
- jq将php时间戳转化日期格式,JQuery将时间戳转换为时间
- 小波变换matlab加密,混沌和小波变换的图像加密压缩算法
- 用HTML写一个会员注册、登录界面
- Python与SEO,搜狗站长平台网站提交POST源码
- 利用MATLAB进行shp文件转换并绘制断层线
- CC2530采集重力加速度MMA7455的值
- access 英语什么意思_access是什么意思_access怎么读_access翻译_用法_发音_词组_同反义词_入口_出口-新东方在线英语词典...
- mysql next key_关于mysql next-key锁的一些个人理解
- HNOI2004宠物收养所
- wordpress之邮箱插件的配置
- 1一10到时的英文单词_1英语(1到10的英语单词)
- 从杉数到滴滴——未入门算法工程师工作日记(快手篇)
热门文章
- linux 脚本 变量为空,Shell判断一个变量是否为空
- xamarin android上传图片到服务器,从图片库中选取照片
- python网络爬虫软件哪个好用_好好学Python,入门网络爬虫之精华版!
- mysql面试关联查询语句_sql语句多表联查语句的练习(面试题)
- 马杰c语言程序设计基础,【我校自编教材】程序设计基础(C语言版)
- 第一小节 初识面向对象
- How do I create 2D water with dynamic waves?
- restful 风格 web api规范
- 编程:使用递归方式判断某个字串是否回文(Palindrome)
- Linux 命令整理 —— 基本操作