HTML5 Canvas ( 填充图形的绘制 ) closePath, fillStyle, fill

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>canvas</title>

    <script type="text/javascript" src="../js/jQuery.js"></script>

    <style type="text/css">

        *{

            margin: 0;

            padding: 0;

            outline: none;

            border: none;

        }

        #canvas{

            margin: auto auto;

            width: 7rem;

            margin: .25rem 0 0 1.5rem;

            border: 1px solid black;

        }

    </style>

</head>

<body>

    <canvas id="canvas" width="1000" height="600"></canvas>

</body>

</html>

<script type="text/javascript">

    /**

     * rem 布局初始化

     */

    $('html').css('font-size', $(window).width()/10);

    /**

     * 获取 canvas 画布

     * 获取 canvas 绘图上下文环境

     */

    var canvas = $('#canvas')[0];

    var context = canvas.getContext('2d');

    /**

     * canvas 填充的图形 ( 一个箭头为例 )

     */

    context.beginPath();

    context.lineTo(200, 200);

    context.lineTo(500, 200);

    context.lineTo(500, 100);

    context.lineTo(700, 250);

    context.lineTo(500, 400);

    context.lineTo(500, 300);

    context.lineTo(200, 300);

    //context.lineTo(200, 200); //当用这种方式封闭的时候, 当线条的粗细较宽时, 会出现瑕疵

    context.closePath(); //封闭一个图形, 没有瑕疵, 推荐使用

    context.fillStyle = 'yellow'; //填充封闭图形的颜色,

    context.fill(); //填充图形 ( 后绘制的图形会覆盖前面的图形, 绘制时注意先后顺序 ) 

    context.lineWidth = 5;

    context.stroke(); //填充图形 ( 后绘制的图形会覆盖前面的图形, 绘制时注意先后顺序 )

</script>
巴特西

HTML5 Canvas ( 填充图形的绘制 ) closePath, fillStyle, fill

最新文章

热门文章
