如何解决使用Javascript-Canvas取得提示
我正在尝试用画布将这种形状的尖端弄圆,我已经尝试过使用“ arcTo”,但是我搞砸了。谢谢。
var my_canvas = document.getElementById('canvas');
var context = my_canvas.getContext("2d");
var magnifier = 4
my_canvas.width = 27 * magnifier;
my_canvas.height = 45 * magnifier;
var x = my_canvas.width / 2;
var y = my_canvas.height / 4;
var triangleWidth = 13 * magnifier;
var triangleHeight = 25 * magnifier;
context.beginPath();
context.moveTo(x,y);
context.lineTo(x + triangleWidth / 2,y + triangleHeight / 2 - 1); // center-right
context.lineTo(x + triangleWidth / 2,y + triangleHeight); // bottom-right
context.lineTo(x - triangleWidth / 2,y + triangleHeight); // bottom-left
context.lineTo(x - triangleWidth / 2,y + triangleHeight / 2 - 1); // center-left
context.lineTo(x,y); // top
context.fillStyle = "orange";
context.stroke();
context.closePath();
canvas {
border: 1px dotted black;
}
<canvas id="canvas">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>
我在这里准备了jsfiddle example
解决方法
var my_canvas = document.getElementById('canvas');
var context = my_canvas.getContext("2d");
var magnifier = 4
my_canvas.width = 27 * magnifier;
my_canvas.height = 45 * magnifier;
var x = my_canvas.width / 2;
var y = my_canvas.height / 4;
var triangleWidth = 13 * magnifier;
var triangleHeight = 25 * magnifier;
context.beginPath();
context.moveTo(x,y);
context.moveTo(x + triangleWidth / 2,y + triangleHeight / 2 - 1); // center-right
context.lineTo(x + triangleWidth / 2,y + triangleHeight); // bottom-right
context.lineTo(x - triangleWidth / 2,y + triangleHeight); // bottom-left
context.lineTo(x - triangleWidth / 2,y + triangleHeight / 2 - 1); // center-left
context.quadraticCurveTo(x,y,x + triangleWidth / 2,y + triangleHeight / 2 - 1) // quadratic curve
context.fillStyle = "orange";
context.stroke();
context.closePath();
canvas {
border: 1px dotted black;
}
<canvas id="canvas">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>
,
不清楚要在哪里取整。
该示例绘制原始形状。然后整个顶部再次变钝。上一次仅将尖端四舍五入。
bookProject
|
|_bookProjectSetting
| |_init.py
| |_asgi.py
| |_celery.py
| |_settings.py
| |_urls.py
| |_wsgi.py
|
|_books
| |_init.py
| |_admin.py
| |_apps.py
| |_models.py
| |_serializers.py
| |_tasks.py
| |_tests.py
| |_urls.py
| |_views.py
|
|_env
|_db.sqlite3
|_dumb.rdb
|_manage.py
{
var ctx = canvas.getContext("2d");
var scale = 4
canvas.width = 27 * scale;
canvas.height = 45 * scale;
const x = canvas.width / 2;
const y = canvas.height / 4;
const triangleWidth = 13 * scale;
const triangleHeight = 25 * scale;
const left = x - triangleWidth / 2;
const right = x + triangleWidth / 2;
const mid = y + triangleHeight / 2;
const bot = y + triangleHeight;
ctx.lineWidth = 3;
ctx.strokeStyle = "red";
ctx.beginPath();
ctx.lineTo(left,bot);
ctx.lineTo(left,mid);
ctx.lineTo(x,0);
ctx.lineTo(right,mid);
ctx.lineTo(right,bot);
ctx.closePath();
ctx.stroke();
ctx.beginPath();
ctx.lineWidth = 2;
ctx.strokeStyle = "blue";
ctx.beginPath();
ctx.lineTo(left,mid);
ctx.arcTo(left,x,triangleWidth / 2);
ctx.arcTo(right,right,mid,triangleWidth / 2);
ctx.lineTo(right,bot); // center-left
ctx.closePath();
ctx.stroke();
ctx.beginPath();
ctx.lineWidth = 1;
ctx.strokeStyle = "black";
ctx.beginPath();
ctx.lineTo(left,mid);
ctx.arcTo(x,triangleWidth / 4);
ctx.lineTo(right,bot);
ctx.closePath();
ctx.stroke();
}
canvas {
border: 1px dotted black;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。