HTML5 绘制普通直线与贝塞尔曲线的实现代码及基本知识点

画线看似轻松对？但这在网页设计中可是基础得不能再基础了。你可能会觉得太小儿科了，不值当费那么多功夫。要知道，正是这些基础才如同盖房子用的砖头一样重要。没有它们，再好看的大楼也建不起。

小伙伴们，别小看画直线！在HTML5里面，它可没那么容易，我们得考虑坐标系、颜色，还要控制线条的粗细和样式！每一步都很重要，不能乱来~而且，如果连直线都画不顺手，那就别说更难的贝塞尔曲线了。

贝塞尔曲线：不只是曲线那么简单

你知道贝塞尔曲线吗？其实它就是画那些看起来特别顺眼的平滑曲线路径用的一个方法，看着感觉很高大上！但是别被这个名字吓到了，它背后的数学原理其实挺让人头大的。贝塞尔曲线是用一些叫“控制点”的东西来决定的，这些点点在哪儿，有几个，都能直接改变曲线的样子！

    
    
    
        function drawGraph(id)
        {
            var canvas=document.getElementById(id);
            var context=canvas.getContext("2d");
            context.fillStyle="#CC00FF" //最外层canvas颜色
            context.fillRect(0,0,300,300)//最外层canvas区域
            context.beginPath()
            context.fillStyle="#008B8B"//填充颜色
            context.strokeStyle="#FFFF00"//线的颜色
            var dx=150
            var dy=150
            var s=100
            var dig=Math.PI/15*11
            for(var i=0;i<30;i++)
            {
                var x=Math.sin(i*dig)
                var y=Math.cos(i*dig)
                context.lineTo(dx+x*s,dy+y*s)
            }
            context.closePath()//关闭路径
            context.fill()//填充颜色
            context.stroke()
        }
    

再说，贝塞尔曲线在动漫创作和平面设计领域可是很有用！比如说，想要做出流畅顺滑的动画效果，或者设计出富有创意的图案时，贝塞尔曲线就能帮到大忙。其实要懂得使用并不难，但是真的能灵活运用，这还真不是件容易事儿。所以，你得先弄懂它的原理，这样才能真正把它玩转起来，为己所用。

HTML5的基础知识：不可忽视

别以为HTML5基础知识无聊又没用，其实它们就跟学数学里的基本运算一样关键！学习网页设计也像是学数学一样，只有掌握了加减乘除，才能够解决更高级的问题。

HTML5可不止能做网站，还包括音乐视频等多种媒体和画图涂鸦之类的技巧。如果你连基本功都没学好，那些高级玩意儿就别想了，看都看不懂。再说，打好基础才能更快地学到新东西，避免总是从零开始。

学习方法：实践出真知

说学习，得动手才行。就别老看书听讲了，试着自己来搞点事。比如说，弄个小游戏啥的，或者搞个网页设计之类的，边干边学，肯定比单纯看教材快多了，还能发现自己哪儿不太对劲儿。

而且，在实际操作中碰到的问题，往往比书本上学到的要复杂得多！想提高自己就得积极去解决它们，同时也会让你更加有信心。所以别害怕尝试，大胆去做，实践出真知！

总结与反思：学习的意义

学HTML5，就是想找到问题根源，提高自己水平。你可能觉得基本的东西没劲，高端的又学不会，其实这都是成长必须得付出点努力哒！每一个小进步都挺不容易，但也都值得嘞。

    
    
    
        function drawGraph(id)
        {
            var canvas=document.getElementById(id);
            var context=canvas.getContext("2d");
            context.fillStyle="#CC00FF"
            context.fillRect(0,0,300,300)
            context.beginPath()
            context.fillStyle="#008B8B"
            context.strokeStyle="#FFFF00"
            var dx=150
            var dy=150
            var s=100
            var dig=Math.PI/15*11
            context.moveTo(dx,dy)
            for(var i=0;i<60;i++)
            {
                var x=Math.sin(i*dig)
                var y=Math.cos(i*dig)
                context.bezierCurveTo(dx+x*s,dy+y*s-100,dx+x*s+100,dy+y*s,dx+x*s,dy+y*s)//贝塞尔绘制函数
            }
            context.closePath()
            context.fill()
            context.stroke()
        }
    

不用着急放弃或者抱怨。静静思考，自己一点点努力，其实比想象中的厉害多了。学点东西，不只是为了能混口饭吃，更多的还是为了让自己变得更好。