HTML5 Canvas 描边和填充

每当在HTML5画布上绘制形状时,都需要设置两个属性Stroke(描边)和Fill(填充)

描边和填充属性

每当在HTML5画布上绘制形状时,都需要设置两个属性:

  1. Stroke
  2. Fill

Stroke(描边)和Fill(填充)确定如何绘制形状。Stroke是形状的轮廓。Fill是形状内部的内容。

ini 复制代码
<canvas id="ex1" width="500" height="150" style="border: 1px solid #cccccc;">
    HTML5 Canvas not supported
</canvas>
<script>
// 1.等待页面完全加载。
window.onload = function() {
    drawExamples();
}
function drawExamples(){
    // 2.获得对canvas元素的引用。
    var canvas  = document.getElementById("ex1");

   // 3.从canvas元素获取2D上下文。
    var context = canvas.getContext("2d");
    // 4.绘制图形。
    context.fillStyle = "#009900";
    context.fillRect(10,10, 100,100);
    context.strokeStyle = "#0000ff";
    context.lineWidth   = 5;
    context.strokeRect(10,10, 100,100);
}
</script>

注意如何使用2D上下文的strokeStyle 和fillStyle属性分别设置描边样式和填充样式。

还要注意如何使用lineWidth属性设置蓝色矩形的描边宽度(轮廓) 。将lineWidth被设置为5,这意味着所概述矩形的线宽度为5。

最后,请注意如何指定2D上下文绘制填充矩形或描边矩形。

引用

菜鸟教程

相关推荐
mCell1 小时前
ECharts 万字入门指南
前端·echarts·数据可视化
X01动力装甲1 小时前
@scqilin/phone-ui 手机外观组件库
前端·javascript·ui·智能手机·数据可视化
Dontla2 小时前
Edge浏览器CSDN文章编辑时一按shift就乱了(Edge shift键)欧路翻译问题(按Shift翻译鼠标所在段落)
前端·edge
lggirls2 小时前
私有证书不被edge浏览器认可的问题的解决-Debian13环境下
前端·edge
野木香3 小时前
tdengine笔记
开发语言·前端·javascript
Cosolar4 小时前
Coze-JS WsChatClient 实时语音对话源码解析
前端
郝学胜-神的一滴4 小时前
享元模式(Flyweight Pattern)
开发语言·前端·c++·设计模式·软件工程·享元模式
zheshiyangyang4 小时前
Sass开发【四】
前端·css·sass
讨厌吃蛋黄酥4 小时前
🔥 面试必考题:手写数组扁平化,5种方法全解析(附代码+图解)
前端·javascript·面试
GISer_Jing4 小时前
作业帮前端面试(准备)
前端·面试·职场和发展