canvas绘制曲线生成工具问题
来源:7-7 编程练习
人生的起源
2019-12-25 00:36:18
老师给的那两个贝塞尔曲线网址,最大只支持到宽高500,我想要画更宽更高的怎么办?
1回答
同学你好, 实际工作中, 关于贝塞尔曲线会有相关人员提供相应的数据,我们直接使用即可。
如果同学想要其他的宽高,可以直接将老师提供的网址中的源码拷贝到本地,修改canvas大小即可。 参考源码示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Canvas Quadratic Curve Example</title> </head> <link rel="stylesheet" type="text/css" media="all" href="http://blogs.sitepointstatic.com/examples/tech/canvas-curves/styles.css" /> <body> <h1>Canvas Quadratic Curve Example</h1> <canvas id="canvas" height="1000" width="1000" class="quadratic"></canvas> <pre id="code">code</pre> <p>This demonstration shows how quadratic curves can be drawn on a canvas element. Drag the line ends or the control point to change the curve.</p> <p>For more information, please refer to:<br /> <a href="http://blogs.sitepoint.com/html5-canvas-draw-quadratic-curves/">How to Draw Quadratic Curves on an HTML5 Canvas</a></p> <p>See also:<br /> <a href="http://blogs.sitepoint.com/html5-canvas-draw-bezier-curves/">How to Draw Bezier Curves on an HTML5 Canvas</a></p> <h2>Disclaimer</h2> <p>The code was developed by <a href="http://twitter.com/craigbuckler">Craig Buckler</a> of <a href="http://optimalworks.net/">OptimalWorks.net</a> for <a href="http://sitepoint.com/">SitePoint.com</a>.</p> <p>This code can be used without any restrictions but please don't expect 24/7 support! A link back to SitePoint.com is appreciated.</p> <script type="text/javascript" src="http://blogs.sitepointstatic.com/examples/tech/canvas-curves/curves.js"></script> </body> </html>
如果我的回答帮助到了你,欢迎采纳,祝学习愉快~
相似问题