HTML5的画布:Stroke(笔触)和Fill(填充)

每当一个HTML5画布上绘制形状,有两个属性,你需要设置:

1、Stroke

2、Fill

笔触和填充决定的形状如何绘制。Stroke(笔触)是一个形状的轮廓。Fill(填充)是在形状内部的内容。

下面这图是绘制了一个蓝色外轮廓和绿色填充的矩形(实际上是两个矩形):



下面试实现的代码:

<span style="font-size:14px;">// 1. wait for the page to be fully loaded.
window.onload = function() {
    drawExamples();
}


function drawExamples(){

    // 2. Obtain a reference to the canvas element.
    var canvas  = document.getElementById("ex1");

    // 3. Obtain a 2D context from the canvas element.
    var context = canvas.getContext("2d");


    // 4. Draw grahpics.
    context.fillStyle = "#009900";
    context.fillRect(10,10, 100,100);

    context.strokeStyle = "#0000ff";
    context.lineWidth   = 5;
    context.strokeRect(10,10, 100,100);
}</span>

请注意的笔触样式和填充样式是分开设置,使用strokeStyle 和fillStyle的2D背景的性质。

还得注意这lineWidth属性,这里设置了一个线宽为5,最后,注意在2D背景下是如何指示或者画一个矩形填充或者是矩形轮廓。


阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/huangyibin628/article/details/47316271
个人分类: HTMl5canvas HTMl5
所属专栏: HTML5自由者
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭