canvas arc画圆遇到的问题

最新推荐文章于 2024-09-04 11:43:15 发布

转载最新推荐文章于 2024-09-04 11:43:15 发布 · 2.8k 阅读

收录于

html5 专栏收录该内容

20 篇文章

订阅专栏

本文介绍了一种利用HTML5的Canvas元素与JavaScript相结合的方法来绘制一系列带有渐变效果的顶部弧形图案。通过调整填充颜色中的RGB值，实现了从蓝色到紫色的平滑过渡。该教程展示了如何运用translate和save/restore等Canvas API特性来实现图形的精确定位和高效绘制。

<!DOCTYPE HTML>
<html>
<head>
<script language="javascript">
function drawTop(ctx, fillStyle){
    ctx.fillStyle = fillStyle;
    ctx.beginPath();
    ctx.arc(0, 0, 30, 0,Math.PI,true);
    ctx.closePath();
    ctx.fill();
}
function draw(){
    var ctx = document.getElementById('myCanvas').getContext("2d");
    // 注意：所有的移动都是基于这一上下文。
    ctx.translate(80,80);
    for (var i=1;i<10;i++){
        ctx.save();
        ctx.translate(60*i, 0);
        drawTop(ctx,"rgb("+(30*i)+","+(255-30*i)+",255)");
        ctx.restore();
    }
}
window.onload=function(){
    draw();
}
</script>
</head>
<body>
<canvas id="myCanvas" width="700" height="300"></canvas>
</body>
</html>