Javascript HTML画布艺术,从草图生成坐标数据
我使用HTML5画布绘制心形:Javascript HTML画布艺术,从草图生成坐标数据,javascript,canvas,html5-canvas,Javascript,Canvas,Html5 Canvas,我使用HTML5画布绘制心形: <!DOCTYPE HTML> <html> <head> <style> body { margin: 0px; padding: 0px; } </style> </head> <body> <canvas id="myCanvas" width="1366" height="60
<!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>
身体{
边际:0px;
填充:0px;
}
心脏变异=[
[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();
上下文。moveTo(707359);
对于(变量i=1;i<(heart.length-1);i++){
context.lineTo(heart[i][0],heart[i][1])
}
//第1行
context.lineWidth=2;
context.strokeStyle='blue';
stroke();
看起来是这样的:
是否有更简单的方法为其他形状生成坐标数据?我希望有一些工具可以让我画一个形状草图并生成坐标数据。是的
如何
AdobeIllustrator和Inkscape等应用程序可以让你用线和曲线“手”(鼠标)绘制形状。它们有一个创建直线的直线工具和一个创建曲线的笔工具
Illustrator可能是设计行业的“黄金标准”,但不是免费的。Inkscape的功能较少(还有一些bug),但它是免费的
由于图形由直线和曲线而不是像素组成,因此您的图形称为“矢量”图形,而不是“像素/光栅”图形
为什么
由直线/曲线组成的图形的重要性在于,您可以将图形导出为名为SVG的文件格式。如果查看导出的SVG文件,您将看到可以相当轻松地转换为html5画布绘制命令的命令。甚至有翻译人员会自动将Illustrator/Inkscape绘图转换为html5画布
示例
这是你的心画了4条曲线
演示:
以下是4条曲线的心脏代码:
context.beginPath();
context.moveTo(150,150);
context.bezierCurveTo( 150,120, 100,120, 100, 150);
context.bezierCurveTo( 100,180, 150,185, 150, 210 );
context.bezierCurveTo( 150,185, 200,180, 200, 150 );
context.bezierCurveTo( 200,120, 150,120, 150, 150 );
context.lineWidth=2;
context.stroke();
从这里开始…
你可以这样创造你的心脏(或任何你想要的形状!):
- 使用钢笔(曲线)工具在Illustrator/Inkscape中绘制心形
- 将您的心脏导出到SVG
- 使用SVG文件中的曲线坐标创建html5画布曲线命令
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);
}
我们调整鼠标位置,使其相对于画布:
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';
}
var code = ' var points = ' + JSON.stringify(points) + ';';