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

HTML5的画布：Stroke（笔触）和Fill（填充）相关推荐

html5中用画布画小狗,HTML5中的Canvas（绘制）
Canvas中不仅可以画线(路径),还能画很多其他的图像,这一章就介绍Canvas的其他两种绘图API. 矩形我们在上一章只用线来画了一个矩形,其实可以一下子就画出来的,用下面函数: ctx.fil ...
php画布怎么清除,JavaScript_JavaScript html5 canvas画布中删除一个块区域的方法，本文实例讲述了html5 canvas画布 - phpStudy...
JavaScript html5 canvas画布中删除一个块区域的方法本文实例讲述了html5 canvas画布中删除一个块区域的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 附:图 ...
HTML5 canvas 画布
画布 canvas 与 svg canvas 能够做什么? 创建一块小画布(canvas) 创建画笔(getContext('2d')) 绘制矩形(fillRect(x,y,width,height) ...
刮刮乐html5效果擦除,利用HTML5的画布Canvas实现刮刮卡效果
先给大家展示效果: 你玩过刮刮卡么?一不小心可以中奖的那种.今天我给大家分享一个基于HTML5技术实现的刮刮卡效果,在PC上只需按住鼠标,在手机上你只需按住指头,轻轻刮去图层就可以模拟真实的刮奖效果. ...
html5实例异步图片加载,javascript – 你如何处理html5的画布图像加载异步？
我一直在学习html5的画布.因为图像可能需要一段时间才能加载,所以适当的技术似乎是在尝试绘制图像之前使用onload来等待图像加载.所以: var fig = document.getElement ...
html 画布重置,html5清空画布的方法有哪些
html5清空画布的方法有哪些发布时间:2020-07-21 11:24:24 来源:亿速云阅读:89 作者:Leah 本篇文章给大家分享的是有关html5清空画布的方法有哪些,小编觉得挺实用的, ...
html canvas画背景图片,HTML5 canvas画布
canvas用途游戏小游戏图表报表如 Charts插件炫酷效果 banner 模拟器.图形编辑器等兼容性 IE9以上和其他浏览器 canvas 标签属性 width height 方 ...
CSS3 渐变新特性和HTML5 Canvas画布背景渐变实现方法详解
CSS3 渐变新特性和HTML5 Canvas画布背景渐变实现方法详解大家好,又见面了,感觉我上一篇博客对部分同学都挺有帮助的,于是我决定继续写下去,会继续的解析知识点让大家更容易理解,希望能给大家 ...
HTML5——Canvas画布绘制图像、绘制线型和绘制图片
一.创建路径创建路径的步骤: 标识开始创建路径-设置图像属性-(标识结束创建路径)-绘制图像 1.标识路径的方法 beginPath()-表示开始创建路径(不可缺省) closePath()-表示结 ...

HTML5的画布：Stroke（笔触）和Fill（填充）

HTML5的画布：Stroke（笔触）和Fill（填充）相关推荐

最新文章

热门文章