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 我正在开发一个需要再次使用碰撞检测的游戏.我通常 ...
随机推荐
- Android 四大组件 Service 服务
1.Service简单介绍 依照使用范围分类: 类别 优点 缺点 差别 应用 本地服务 Local Service 本地服务在一定程度上节约了资源,另外本地服务由于是在同一进程,因此不须要IPC,也 ...
- Cublas矩阵加速运算
前言 编写 CUDA 程序真心不是个简单的事儿,调试也不方便,很费时.那么有没有一些现成的 CUDA 库来调用呢? 答案是有的,如 CUBLAS 就是 CUDA 专门用来解决线性代数运算的库. 本文将 ...
- pdf 移除密码 去除水印 批量去除水印 编辑文字 批量替换文字
1.pdf除密码: http://pan.baidu.com/share/link?shareid=308194398&uk=370045712 2.去除水印:http://wenku.ba ...
- TCP/IP协议理解
TCP/IP协议理解 一. 协议分层 由于ISO标准中的网络模型是个7层模型,但是由于7层模型对于当时的网络厂商来说太过复杂,很多厂家采用了简化的4层模型来实现网络设备,4层模型也就成了事实的网 ...
- 设计模式---策略模式Strategy（对象行为型）
1. 概述 策略模式定义了一系列的算法,并将每一个算法封装起来,而且使它们还可以相互替换.策略模式让算法独立于使用它的客户而独立变化. 策略模式是对算法的封装,它把算法的责任和算法本身分割开,委派给不 ...
- wamp多站点多端口配置
1.配置httpd.conf 监听多个端口 #Listen 12.34.56.78:80 Listen 8081 Listen 8082 Listen 8083 可以通过netstat -n -a查看 ...
- 使用ActivityGroup需要注意的地方
Group里面的所有“孩子Activity”不能直接调用finish(),只能等ActivityGroup调用它自己的finish()后,会自动调用所有“孩子Activity”的finish().
- Git 推送操作
Jerry 修改了他的最后一次提交的修改操作,他已经准备好将更改.推操作的数据永久存储的 Git 仓库.推操作成功后,其他开发人员可以看到Jerry 的变化. 他执行的git日志命令来查看提交的细节. ...
- 对TextFile格式文件的lzo压缩建立index索引
转自:http://blog.csdn.net/yangbutao/article/details/8519572 hadoop中可以对文件进行压缩,可以采用gzip.lzo.snappy等压缩算法. ...
- Python实现无向图最短路径
一心想学习算法,很少去真正静下心来去研究,前几天趁着周末去了解了最短路径的资料,用python写了一个最短路径算法.算法是基于带权无向图去寻找两个点之间的最短路径,数据存储用邻接矩阵记录.首先画出一幅 ...