- iOS/Objective-C 元类和类别
- objective-c - -1001 错误,当 NSURLSession 通过 httpproxy 和/etc/hosts
- java - 使用网络类获取 url 地址
- ios - 推送通知中不播放声音
我用 HTML5 canvas 画了一个心形:
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="1366" height="600"></canvas>
<script>
var heart = [
[707,359],[707,359],[707,359],[707,359],[708,358],[711,354],[713,352],[714,348],[716,345],[720,335],
[721,334],[722,333],[724,332],[725,330],[727,327],[731,322],[734,320],[737,318],[740,314],[743,312],
[745,311],[749,309],[753,308],[757,306],[761,303],[764,302],[767,302],[771,301],[774,301],[778,301],
[783,301],[786,301],[790,300],[796,300],[801,300],[805,300],[809,300],[811,300],[815,302],[817,303],
[820,305],[822,306],[824,307],[827,309],[830,311],[834,313],[836,314],[838,316],[841,318],[844,321],
[845,324],[847,326],[849,328],[852,332],[853,334],[855,336],[857,337],[858,339],[860,341],[862,345],
[863,349],[863,352],[864,356],[864,359],[865,362],[866,364],[868,368],[869,372],[870,377],[871,381],
[872,384],[872,388],[872,392],[872,395],[872,399],[872,401],[872,405],[872,409],[871,412],[870,417],
[869,419],[869,422],[867,427],[866,429],[865,434],[863,438],[862,442],[861,443],[860,445],[857,448],
[854,451],[852,454],[849,456],[846,459],[843,460],[836,466],[835,466],[833,467],[821,475],[820,477],
[819,478],[817,481],[815,483],[811,486],[808,487],[803,491],[802,491],[800,492],[795,493],[791,497],
[789,498],[786,498],[780,502],[772,507],[770,510],[767,511],[762,516],[758,520],[756,524],[753,527],
[750,529],[746,532],[741,534],[736,537],[732,538],[731,539],[735,537],[735,537],[735,537],[730,543],
[729,546],[727,551],[726,553],[723,555],[721,558],[715,568],[714,570],[714,572],[713,575],[708,585],
[708,586],[707,586],[704,583],[704,359],[704,359],[700,356],[698,352],[697,350],[696,345],[694,343],
[693,340],[690,335],[688,335],[687,334],[683,332],[681,329],[677,326],[675,323],[672,319],[669,314],
[668,312],[663,310],[660,310],[656,310],[653,309],[647,309],[644,308],[642,308],[637,307],[632,303],
[628,301],[624,297],[621,297],[619,297],[616,297],[616,298],[616,299],[614,300],[620,302],[620,302],
[620,302],[618,302],[612,302],[605,302],[598,302],[596,303],[594,305],[592,307],[590,309],[586,310],
[583,313],[582,315],[579,319],[576,320],[573,323],[571,325],[569,327],[563,329],[560,333],[558,336],
[557,338],[556,341],[555,343],[551,346],[549,349],[549,354],[549,357],[547,361],[546,367],[543,372],
[542,375],[541,380],[540,381],[540,382],[540,382],[540,382],[540,382],[540,384],[540,386],[540,389],
[539,391],[539,394],[539,398],[539,404],[539,408],[539,412],[539,416],[540,423],[542,428],[544,433],
[549,436],[552,439],[555,442],[557,445],[560,448],[562,452],[564,459],[565,461],[560,449],[560,449],
[561,450],[571,458],[580,466],[584,469],[587,473],[589,476],[591,477],[575,466],[575,466],[575,466],
[576,466],[582,471],[587,475],[590,477],[594,481],[598,484],[601,489],[604,491],[607,495],[611,496],
[617,498],[622,500],[626,501],[629,504],[633,508],[636,510],[642,515],[650,522],[651,525],[655,528],
[657,529],[660,530],[663,530],[667,533],[671,534],[676,536],[679,537],[681,539],[683,540],[676,536],
[676,536],[676,536],[679,539],[684,546],[687,548],[689,551],[692,554],[696,558],[698,563],[701,567],
[702,571],[704,574],[705,577],[706,579],[707,580],[708,582],[709,586]
];
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(707, 359);
for(var i = 1; i < (heart.length - 1) ; i++){
context.lineTo(heart[i][0], heart[i][1])
}
// line 1
context.lineWidth = 2;
context.strokeStyle = 'blue';
context.stroke();
</script>
</body>
</html>
看起来像这样:
有没有更简单的方法来生成其他形状的坐标数据?我希望有一些工具可以让我绘制形状草图并为我生成坐标数据。
最佳答案
您需要一种方法来记录您的点,以便您可以将它们重现为字符串、数组等。
这将记录您在 Canvas 上绘制的任何内容:
var points = [], /// holds strokes and points
isDown = false, /// for draw mode
prevX, prevY; /// for draw mode
第一次点击时,记录第一个点:
canvas.onmousedown = function(e) {
/// adjust mouse position (see below)
var pos = getXY(e);
/// this is used to draw a line
prevX = pos.x;
prevY = pos.y;
/// add new stroke
points.push([]);
/// record point in this stroke
points[points.length - 1].push([pos.x, pos.y]);
/// we are in draw mode
isDown = true;
}
然后只需将所有绘制的点推到当前笔划即可:
canvas.onmousemove = function(e) {
if (!isDown) return;
var pos = getXY(e);
/// draw a line from previous point to this
ctx.beginPath();
ctx.moveTo(prevX, prevY);
ctx.lineTo(pos.x, pos.y);
ctx.stroke();
/// set previous to this point
prevX = pos.x;
prevY = pos.y;
/// record to current stroke
points[points.length - 1].push([pos.x, pos.y]);
}
在鼠标松开时;在演示中,它将点生成为字符串,可以将其直接复制到您的 JS 代码中:
canvas.onmouseup = function() {
isDown = false;
coords.innerHTML = JSON.stringify(points);
}
我们调整鼠标位置,使其相对于 Canvas :
function getXY(e) {
var r = canvas.getBoundingClientRect();
return {x: e.clientX - r.left, y: e.clientY - r.top}
}
现在我们已经记录了点,我们需要一种方法来重现它们。
此代码段能够渲染我们刚刚记录的笔划和点 - 对于演示,我设置红色以区分渲染的笔划和绘制的笔划:
function renderPoints(points) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.strokeStyle = '#f00';
/// get a stroke
for(var i = 0, t, p, pts; pts = points[i]; i++) {
/// render stroke
ctx.beginPath();
ctx.moveTo(pts[0][0], pts[0][2]);
for(t = 1; p =pts[t]; t++) {
ctx.lineTo(p[0], p[1]);
}
ctx.stroke();
}
ctx.strokeStyle = '#000';
}
这颗心(?!):
为您生成这些点:
[[[103,99],[103,100],[103,98],[105,93],[115,79],[129,61],[139,52],[145,49],[149,49],[152,51],[154,54],[155,57],[156,65],[154,79],[152,89],[149,99],[145,110],[139,124],[131,142],[118,163],[108,176],[101,184],[97,185],[94,187],[87,187],[76,180],[65,166],[60,156],[54,145],[46,119],[41,98],[39,84],[39,81],[39,79],[39,77],[39,76],[40,75],[42,74],[43,72],[46,69],[47,67],[48,67],[49,67],[50,67],[51,68],[52,69],[54,70],[61,75],[71,87],[82,101],[84,105],[87,108],[89,111],[89,112],[89,113],[89,114],[89,115],[89,116],[90,118]]]
它们可以直接提供给 render 方法,或者通过在它前面加上一些代码以允许您直接复制和粘贴生成的字符串,可以使笔划/点数组更加复杂,例如:
var code = ' var points = ' + JSON.stringify(points) + ';';
关于javascript - HTML canvas art,从草图生成坐标数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21050014/
我是 React-native 的新手。 我遇到了这个错误:UnableToResolveError:无法从 Libraries/ART/ReactNativeART.js 解析模块 merge 我使
自 Android Lollipop 以来,Google 已将 DVM 替换为 ART,因为 ART 比 DVM 更快。还有其他原因吗? 最佳答案 ART 带来了一些主要的性能改进,这是 Dalvik
在具有目标 SDK 29 的 Android 应用程序上从 5.11.0 更新到 Facebook Audience 6.2.0 后,我在一小部分 Android 11 设备上看到了大量的崩溃报告。根
我正在尝试将 Android Lollipop 移植到 arndale 板上,但我面临以下有关 ART 崩溃 (AndroidRunTime) 的问题。 > I/art ( 2264): Reloca
我正在使用 newLisp 试用 Artful Mysql 模块,使用示例的“冒烟”测试未连接到 MySQL。 假设: 我是一名新手 Lisp 程序员。 平台是 MacOS X 10.9 新语言 10
Android 5.0+ 中 ART 运行时的一个被吹捧的功能是堆压缩,以减少堆 fragment 。 fragment 堆可以更容易地获得 OutOfMemoryErrors,因为可能没有一个连续的
我正在研究 ARKit(iPhone 框架),ARKit 项目免费提供的文件夹之一是标题为:art.scnassets 的文件夹。 .这些代表什么:art. ? .scn ? .dea ? tex ?
我目前正在使用 React Native ART 模块,除 Text 组件外一切正常,但该错误仅发生在 iOS 和 android 中 一切似乎都按预期工作。 当我尝试在 iOS 中使用 Text 组
对于那些熟悉“Prolog 的艺术”的人,您会建议使用哪些软件工具(例如 IDE、编辑器、编译器等)来学习这本书? 最佳答案 SWI-Prolog是一个免费的 Prolog 实现,带有一个集成编辑器(
我要为 Android 开发我的第一个应用程序(不用担心这只是一个学校项目,不会成为市场上另一个无用的应用程序:>)。 因此,在开始这项任务之前,我做了一些教程,其中之一(我认为它非常有用,因为有 s
我正在尝试从使用 JavaScript 的网站检索 html。我的方法如下: 创建一个 headless WebView(没有在 XML 中定义任何 View )并启用 JS。 创建一个 JavaSc
我希望 Android 运行时 (ART) 写入文件。因此,我将以下代码添加到 WORKING_DIRECTORY/art/runtime/runtime.cc。 std::string pid_
不知ART是不是虚拟机。 dex2oat 将 dalvik 字节代码编译成 native (特定于平台)代码,即 elf 文件。所以正如 android 开发者文章中提到的,它仍然有垃圾收集器。我不明
对于一些使用 ART 的用户,我在使用 Aviary SDK 时遇到了一个奇怪的错误。我很困惑为什么会发生这种情况(显然仅在 4.4.x 上),因为在 Dalvik 上调用此 SDK 时该应用程序可以
我已阅读互联网上有关适用于 Android 操作系统的新 ART 运行时的文章。许多文章称 ART 为新的虚拟机,我认为这是错误的,因为应用程序在安装后完全编译为 native 机器代码。如果 ART
我想知道并在谷歌上搜索答案,但没有找到。那么,更新的 ART 沙盒应用程序是否像 Dalvik VM?更准确地说,这个链接的图片也可以申请ART吗? http://davidchang168.blog
我想使用程序或图形库将图像转换为 ASCII 艺术,但我想指定要使用的调色板(符号)。所以基本上我想要一个图像,它从某个字母 A 呈现为文本,它是完整 ASCII 表的子集,例如 A := {a,b,
我正在阅读这本书 Art of Exploitation,这是一本好书,我从exploit_notesearch.c 文件中看到了那个例子。 简要作者尝试从notesearch.c溢出程序 int m
我有 3 个表 actor 、 movie 、 casting 。我必须找到与 Actor “ART Garfunkel”合作过的人。 我有解决方案,但我无法理解以下查询的工作原理。 **movie*
我的 android 应用程序中有一个 SQLite 数据库,但不幸的是,使用新的虚拟机 ART 它停止工作。 我在 DbHelper 类中遇到错误,特别是当我打开数据库以写入/读取它时。 我需要帮助
我是一名优秀的程序员,十分优秀!