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

原创 2015年08月06日 14:35:01

每当一个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背景下是如何指示或者画一个矩形填充或者是矩形轮廓。


版权声明:本文为博主原创文章,未经博主允许不得转载。

HTML5 Canvas 填充与描边(Fill And Stroke)

演示HTML5 Canvas Fill 与Stroke文字效果,基于Canvas如何实现纹理填充与描边
  • jia20003
  • jia20003
  • 2013年07月12日 15:00
  • 18978

HTML5 Canvas中实现绘制一个像素宽的细线

演示HTML5 Canvas中如何正确的画出一个像素宽的直线。
  • jia20003
  • jia20003
  • 2013年07月25日 23:10
  • 16296

HTML5 Canvas渐进填充与透明

详细解释HTML5 Canvas中渐进填充的参数设置与使用,Canvas中透明度的设置与使用, 结合渐进填充与透明度支持,实现图像的Mask效果。演示水平颜色渐进,垂直颜色渐变 等颜色渐变填充方法。...
  • jia20003
  • jia20003
  • 2013年07月05日 14:35
  • 19659

HTML5简明教程-1.1.2.HTML5Canvas参考手册 之 笔触strokeStyle

strokeStyle属性定义了我们在canvas画布上进行图形绘制时的“笔触”,简单点说,就是定义了我们的画笔样式。另外,strokeStyle仅仅定义笔触样式,不能定义填充样式。...
  • tomorrow13210073213
  • tomorrow13210073213
  • 2014年12月29日 08:39
  • 2019

IOS用CGContextRef画各种图形(文字、圆、直线、弧线、矩形、扇形、椭圆、三角形、圆角矩形、贝塞尔曲线、图片)

首先了解一下CGContextRef: An opaque type that represents a Quartz 2D drawing environment. Graphics Conte...
  • rhljiayou
  • rhljiayou
  • 2013年08月12日 11:43
  • 171625

Echarts数据可视化series-effectscatter特效散点图,开发全解+完美注释

mytextStyle={ color:"#333",//文字颜色 fontStyle:"normal",//italic斜体 oblique倾斜 fontWeight:"n...
  • luanpeng825485697
  • luanpeng825485697
  • 2017年08月07日 12:23
  • 2849

svg的stroke属性,神奇的描边

stroke相关属性
  • ning0_o
  • ning0_o
  • 2017年02月10日 14:53
  • 4945

html5+d3 svg 线条、图形颜色渐变动画

代码如下: 线条、图形颜色渐变动画 $(document).ready(function(){
  • tuoxinquyu
  • tuoxinquyu
  • 2016年01月05日 11:40
  • 3368

用highcharts写的一个流程图

先来看效果: 再看jsp代码: "> 血缘关
  • yunsyz
  • yunsyz
  • 2014年03月28日 12:20
  • 3206

HTML5基础加强css样式篇(animation填充属性:animation-fill-mode,播放控制属性:animation-play-state,播放顺序设置,)(三十一)

代码如下: .box { /* .box 默认样式 */ margin: 200px 0 0 200...
  • u010853130
  • u010853130
  • 2017年04月05日 14:57
  • 358
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML5的画布:Stroke(笔触)和Fill(填充)
举报原因:
原因补充:

(最多只允许输入30个字)