【Html5每日练习】canvas quadraticCurve二次曲线深入理解

最新推荐文章于 2024-03-31 17:17:38 发布

boia

最新推荐文章于 2024-03-31 17:17:38 发布

阅读量5k

点赞数 1

分类专栏： html5 canvas 文章标签： html5 百度 html

本文链接：https://blog.csdn.net/boiaprogramfan0420/article/details/7455523

版权

html5 canvas 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

今天在canvas看见两个方法用来绘制贝塞尔曲线，我觉得很好奇，就点开了参考手册的说明，但令我失望了，几乎什么也没有，只有那么一句话，贝塞尔曲线的数学原理超过了本参考页的范围。好吧，看来有些东西就得靠自己，在百度搜索了下贝塞尔曲线，百度文科解释的还是挺透彻的，明白了以后，就开始操作了，代码很简单，如下

<html lang="en-US">
<canvas id=myCanvas width=500px height=500px></canvas>

<script>
	var myCanvas = document.getElementById("myCanvas");
	var context = myCanvas.getContext("2d");

	context.lineWidth = 3;
	context.strokeStyle = "blue";
	
	context.moveTo(168,130);
	context.quadraticCurveTo(288,0,388,150);
	context.stroke();

</script>
</html>

然后自己作了下图来说明代码的解释，主要看3个点，（168,130）是起点，（388,150）是终点，（288,0）是和起末点相关的点，图画的不是很好看，不过我觉得应该可以说明一些东西了，有兴趣的可以研究一下三次方曲线，原理和二次是大同小异的。