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 我正在开发一个需要再次使用碰撞检测的游戏.我通常 ...
随机推荐
- SNF快速开发平台--多组织+多平台+多系统处理方案
多组织架构的集团要看组织的组成形式: 1.如果每个组织都是独立法人,这个相对来说简单一些,组织之间的关联交易跟集团外部客户交易没什么本质区别, 各个公司都是独立核算,正常的应收应付都需要开发票,各自出 ...
- Spark 核心篇-SparkContext
本章内容: 1.功能描述 本篇文章就要根据源码分析SparkContext所做的一些事情,用过Spark的开发者都知道SparkContext是编写Spark程序用到的第一个类,足以说明SparkCo ...
- 腾讯云SpringBoot部署 + HTTPS配置
springboot可以打包为jar和war,jar不多说了,最近的一个工程需要打包为war发布,大致说一下吧: 先看一下项目的大致结构: 第一步,需要排除springboot自带的tomcat插件 ...
- Linux之sort
sort是在Linux里非常常用的一个命令,管排序的,集中精力,五分钟搞定sort,现在开始! 1 sort的工作原理 sort将文件的每一行作为一个单位,相互比较,比较原则是从首字符向后,依次按AS ...
- Approx Analytic Arealight
试着实现的基于分析方法的近似面积光源.
- Linux查看文件总的数据行数，并按行拆分
先利用 wc -l BLM.txt 读出 BLM.txt 文件一共有多少行. 再 1. 以行数拆分 -l 参数: split –l 50 原始文件 拆分后文件名前缀 例:以50行对文件进行 ...
- Java知多少（98）Graphics类的绘图方法
Graphics类提供基本绘图方法,Graphics2D类提供更强大的绘图能力.本节讲解Graphics类,下节讲解Graphics2D. Graphics类提供基本的几何图形绘制方法,主要有:画线段 ...
- 分布式系统CAP理论与CA选择
总结: CAP指的是数据一致性.服务可用性.分区容错性:(这里的一致性指的是强一致性,又叫原子性或线性一致性:可用性指的是所有读写操作都要能终止,没有时延上的要求) 分布式系统中P是必选项:在P必选的 ...
- 关于CLOS架构的举例 网络级 设备级 FATTREE网络 网络级CLOS 以及CLOS涉及的调度算法RR
1.概述 CLOS来自于传统电路交换概念,这个概念年代太久远,在当前数据通信网络中,内涵有所变化.本文主要谈的是实际上赋予的与原来略微有所差异的内涵. CLOS架构本身概念比较宽泛,有设备级的CLOS ...
- Mysql 查询decimal 引号‘’增加精度
sql 通过decimal条件查询添加和不添加引号的区别 SELECT * FROM meta_variable WHERE DataTableID = 123456 # decimal类型 AND ...