本文介绍了HTML5 Canvas 中的曲线绘制的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着跟版网的小编来一起学习吧!
问题描述
我想在 HTML5 画布中绘制一条像 这里提到的这样的曲线.有人能指出我应该使用什么方法吗?
I want to draw a curve like this mentioned here in HTML5 canvas. Can someone point to what methods should I use.?
推荐答案
另一种方法是使用 方法bezierCurveTo
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
let cw = canvas.width = 536;
let ch = canvas.height = 100;
ctx.beginPath();
ctx.moveTo(0,28)
ctx.bezierCurveTo(0,28,31,7,70,8);
ctx.bezierCurveTo(109,9,313,99,425,90);
ctx.bezierCurveTo(516,82.5,536,55,536,55);
ctx.stroke();
canvas{border:1px solid #d9d9d9;}
<canvas></canvas>
这篇关于HTML5 Canvas 中的曲线绘制的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持跟版网!
本站部分内容来源互联网,如果有图片或者内容侵犯了您的权益,请联系我们,我们会在确认后第一时间进行删除!