canvas 线性规划
小结：
1、线性规划
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>canvas点击事件</title></head>
<body></body>
</html>
<canvas id="myCanvas" width="800" height="800" style="border:1px solid #d3d3d3;">您的浏览器不支持 HTML5 canvas 标签。</canvas>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
function drawSquare(colorStr) {
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(0, 100);
ctx.lineTo(100, 100);
ctx.lineTo(100, 0);
ctx.lineTo(0, 0);
ctx.lineWidth = 6;
ctx.strokeStyle = colorStr;
ctx.stroke();
ctx.closePath();
}
function drawTri(colorStr) {
ctx.beginPath();
ctx.moveTo(50, 0);
ctx.lineTo(0, 100);
ctx.lineTo(100, 100);
ctx.lineTo(50, 0);
ctx.lineWidth = 4;
ctx.strokeStyle = colorStr;
ctx.stroke();
ctx.closePath();
}
function drawBorder() {
drawTri('red');
drawSquare('green');
}
function onSquare(p) {
if ((p.x == 0 && p.y <= 100) || (p.x <= 100 && p.y == 100)) {
return true
} else {
return false
}
}
function onTri(p) {
if ((p.y - 0) / (p.x - 50) == 100 / ( - 50)) {
return true
} else {
return false
}
}
var colorToggleSquare = {
b: true,
c0: 'black',
c1: 'yellow'
};
var colorToggleTri = {
b: true,
c0: 'blue',
c1: 'pink'
};
$(function() {
var myAction = {};
var dom = {
canvas: $('#myCanvas')
};
$.extend(myAction, {
initCanvas: function() {
drawBorder()
},
getEventPosition: function(ev) {
var x, y;
if (ev.layerX || ev.layerX == 0) {
x = ev.layerX;
y = ev.layerY;
} else if (ev.offsetX || ev.offsetX == 0) {
x = ev.offsetX;
y = ev.offsetY;
}
return {
x: x,
y: y
};
},
initEvent: function() {
dom.canvas.on('click',
function(e) {
var p = myAction.getEventPosition(e);
console.log(p);
if (onSquare(p)) {
if (colorToggleSquare.b) {
drawSquare(colorToggleSquare.c0);
} else {
drawSquare(colorToggleSquare.c1);
}
colorToggleSquare.b = !colorToggleSquare.b;
} else if (onTri(p)) {
if (colorToggleTri.b) {
drawTri(colorToggleTri.c0);
} else {
drawTri(colorToggleTri.c1);
}
colorToggleTri.b = !colorToggleTri.b;
}
});
}
});
var init = function() {
myAction.initCanvas();
myAction.initEvent();
} ();
})</script>
canvas 线性规划的更多相关文章
- html5 canvas常用api总结(三)--图像变换API
canvas的图像变换api,可以帮助我们更加方便的绘画出一些酷炫的效果,也可以用来制作动画.接下来将总结一下canvas的变换方法,文末有一个例子来更加深刻的了解和利用这几个api. 1.画布旋转a ...
- 【探索】利用 canvas 实现数据压缩
前言 HTTP 支持 GZip 压缩,可节省不少传输资源.但遗憾的是,只有下载才有,上传并不支持.如果上传也能压缩,那就完美了.特别适合大量文本提交的场合,比如博客园,就是很好的例子. 虽然标准不支持 ...
- 简单入门canvas - 通过刮奖效果来学习
一 .前言 一直在做PC端的前端开发,从互联网到行业软件.最近发现移动端已经成为前端必备技能了,真是不能停止学习.HTML5新增的一些东西,canvas是用的比较多也比较复杂的一个,简单的入门了一下, ...
- 获取Canvas当前坐标系矩阵
前言 在我的另一篇博文 Canvas坐标系转换 中,我们知道了所有的平移缩放旋转操作都会影响到画布坐标系.那在我们对画布进行了一系列操作之后,怎么再知道当前矩阵数据状态呢. 具体代码 首先请看下面的一 ...
- Canvas坐标系转换
默认坐标系与当前坐标系 canvas中的坐标是从左上角开始的,x轴沿着水平方向(按像素)向右延伸,y轴沿垂直方向向下延伸.左上角坐标为x=0,y=0的点称作原点.在默认坐标系中,每一个点的坐标都是直接 ...
- Canvas绘图之平移translate、旋转rotate、缩放scale
画布操作介绍 画布绘图的环境通过translate(),scale(),rotate(), setTransform()和transform()来改变,它们会对画布的变换矩阵产生影响. 函数 方法 描 ...
- 用html5的canvas和JavaScript创建一个绘图程序
本文将引导你使用canvas和JavaScript创建一个简单的绘图程序. 创建canvas元素 首先准备容器Canvas元素,接下来所有的事情都会在JavaScript里面. <canvas ...
- html5标签canvas函数drawImage使用方法
html5中标签canvas,函数drawImage(): 使用drawImage()方法绘制图像.绘图环境提供了该方法的三个不同版本.参数传递三种形式: drawImage(image,x,y):在 ...
- 使用 JavaScript 和 canvas 做精确的像素碰撞检测
原文地址:Pixel accurate collision detection with Javascript and Canvas 译者:nzbin 我正在开发一个需要再次使用碰撞检测的游戏.我通常 ...
随机推荐
- 掌握Docker命令-Docker for Web Developers(4)
1.管理镜像命令 获取镜像 docker push ubuntu:14:04 查看镜像列表 docker images 重命名image docker tag IMAGE-NAME NEW-IMAGE ...
- Maven包下载不下来的情况
从svn上遇到过项目下载下来,缺丢失了一些包,怎么都下载不了,只能从同事的电脑上给拷贝下来? 千万别这样,别问为何,说多了都是泪,然后发现. 如果是eclipse的话: 勾选这两个选项,就能下载下来了 ...
- 奇怪的Excel导入问题,OleDbException (0x80004005): 未指定的错误
windows server 2008 的安全性做的比较好,首先进入系统盘(一般都是C:\),点击工具--文件夹选项--查看,把“使用共享向导(推荐)”的勾去掉,把“隐藏受保护的操作系统文件(推荐)” ...
- Java——安全地停止线程
错误用例 下面用例中,一个正在sleep的线程,在调用interrupt后,wait方法检查到isInterrupted()为true,抛出异常, 而catch到异常后没有处理.一个抛出了Interr ...
- 【转载】VC维，结构风险最小化
以下文章转载自http://blog.sina.com.cn/s/blog_7103b28a0102w9tr.html 如有侵权,请留言,立即删除. 1 VC维的描述和理解 给定一个集合S={x1,x ...
- HAVANA 团队简介
在Ensembl 下载的gtf 文件中,会有一部分来源自 HAVANA havana 的全称叫做 human and vertebrate analysis and annotation, 是sag ...
- [TensorBoard] *Cookbook - Tensorboard
Ref: https://www.tensorflow.org/get_started/summaries_and_tensorboard 可视化对于Training的重要性,不言而喻. 代码示范 # ...
- java导出json格式文件
生成json文件代码: import java.io.File; import java.io.FileWriter; import java.io.Writer; public class Crea ...
- 【代码审计】XIAOCMS_后台database.php页面存在SQL注入漏洞
0x00 环境准备 XIAOCMS官网: http://www.xiaocms.com/ 网站源码版本:XiaoCms (发布时间:2014-12-29) 程序源码下载:http://www.xi ...
- [R]统计工具包
Wilcoxon Rank Sum and Signed Rank Tests data <-read.csv('XX.csv') wilcox.test(data$value1, data$v ...