夏日嗨翻天！HTML5教你画西瓜？

夏天就要到！想不想吃瓜呀？给你讲个好玩的事儿，你知道怎样用HTML5画出半个西瓜吗？是不是觉得很有趣？

你想学HTML5？在家弄个半边西瓜模样的小玩意练手呗！别忘了，其实真正的西瓜是红绿两色凑出来的

哈喽~教大家个简单的办法，直接把我说的这段代码复制进您自家电脑就能试试看啦～

代码就在这里：

    
        window.onload = function()
        {
            canvas = document.getElementById("canvasArea");
            context = canvas.getContext("2d");
            drawArc ( 100, 25, 80, 0, 180, false, "#97C30A", "#FF717E");
            function drawArc(xPos, yPos, radius, startAngle, endAngle,
                             anticlockwise, lineColor, fillColor)
            {
                var startAngle = startAngle * (Math.PI/180);
                var endAngle = endAngle * (Math.PI/180);
                var radius = radius;
                context.strokeStyle = lineColor;
                context.fillStyle = fillColor;
                context.lineWidth = 8;
                context.beginPath();
                context.arc(xPos, yPos, radius, startAngle, endAngle, anticlockwise);
                context.fill();
                context.stroke();
            }
        }
    



    
        你的浏览器目前不支持HTML5 Canvas。
    

登录后复制

效果就是这样：

看看看~是不是让你们馋得流口水啊哈哈哈~

看看HTML5的 canvas ，那个能画画、有动态视觉，还能图文演示的东西。用上了它，你的网站就能马上有趣起来了！

Canvas，不就是HTML5里让我们轻松在网页上玩涂鸦的神器吗？每个像素都能被我们“摆弄”用这东西，咱可以挥洒自如地绘出直线、矩形、圆圈、字儿还有放图片啥的，尽情发挥想象力！

想在画板上画个圆弧？不难！用 arc()函数就行。使用方法简单得不得了：

别怕看不懂这几个数字，其实挺容易懂的。x, y是你想让圆心在哪里，radius代表半径大小，至于startAngle和endAngle，那是指弧线的起止角。提醒一下，要用角度表示。末尾那个逆时针参数，选true的话，弧线画起来是从左往右；反之，选false，那就是从右向左。

搞定html5画瓜技巧咯，来试试看你能画出超美味的西瓜喔！

哥们儿，今天我们来说个酷炫的话题并来解决问题，你就会喜欢上它！如果喜欢，记得告诉我谢谢关注点赞转发！夏日炎炎，西瓜有多重要你知道吗？今天我教你们怎么用HTML5画个美美的西瓜，而且只需要懂得 Canvas 元素和 arc() 方法就行。试一下！当然别忘记留言或分享给朋友们！

arc(x, y, radius, startAngle, endAngle, anticlockwise)