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 我正在开发一个需要再次使用碰撞检测的游戏.我通常 ...
随机推荐
- css自适应浏览器大小
css自适应浏览器大小 1.屏幕 > 900px :显示3列 2.450px < 屏幕 < 900px :显示2列 3.屏幕 < 450px :显示1列 <!DOCTYP ...
- 物联网架构成长之路(20)-申请免费SSL证书
0.前言 今天域名备案申请下来了,接下来就是申请个SSL证书,现在普通的网站没有SSL都不好意思见人了.可是稍微好点的企业级SSL证书还是比较贵的.不过还好有免费的可以用.只不过要定时去续时间.这个不 ...
- C#中的Action<>和Func<>
其实他们两个都是委托[代理]的简写形式. 一.[action<>]指定那些只有输入参数,没有返回值的委托 Delegate的代码: public delegate void myDeleg ...
- Jquery计算指定日期加上多少天、加多少月、加多少年的日期
/* * 功能:实现VBScript的DateAdd功能. * 参数:interval,字符串表达式,表示要添加的时间间隔. * 参数:number,数值表达式,表示要添加的时间间隔的个数. * 参数 ...
- [译]我们为何基于FreeBSD打造解决方案？
[译注]翻译这篇文章,主要是觉得老外在思考问题时,勇于打破固有的技术栈积累,尝试不同的选择,从而找到最合适自己的技术方案.得到真正的实惠. Synergy SKY提供多种软件解决方案,本文想讨论的是关 ...
- html5——canvas画布
一.基本介绍 1,canvas是画布,可以描画线条,图片等,现代的浏览器大部分都支持. canvas的width,height默认为300*150,要指定画布大小,不能用css样式的widh,heig ...
- CSS实现响应式全屏背景图
body { /* 加载背景图 */ background-image: url(images/background-photo.jpg); /* 背景图垂直.水平均居中 */ background- ...
- eBGP&iBGP 总结
3.4 BGP 原文地址:http://mp.weixin.qq.com/s?src=3×tamp=1500043305&ver=1&signature=XwiIVV ...
- Hadoop、Spark 集群环境搭建
1.基础环境搭建 1.1运行环境说明 1.1.1硬软件环境 主机操作系统:Windows 64位,四核8线程,主频3.2G,8G内存 虚拟软件:VMware Workstation Pro 虚拟机操作 ...
- 关于HTTP请求返回417 “Expectation Failed”
在使用HttpClient默认情况下做POST的时候, HttpClient并不会直接就发起POST请求, 而是会分为俩步, 1.发送一个请求, 包含一个Expect:100-continue, 询问 ...