1.画布大小

  • canvas默认的大小是 300*150，通过操作width/height属性可以设置画布的大小，属性值只能是具体是像素值，而不能是百分比。
<body>

    <div class="box">

        <!-- 在标签中设置画布大小 -->

        <canvas width="400" height="200"></canvas>

    </div>

</body>


//js设置画布大小

var canvas = document.querySelector("canvas")

// 方法一

canvas.setAttribute("width",400)

canvas.setAttribute("height",200)

//方法二

canvas.width = 400

canvas.height = 200
  • 注意：css样式里面width/height只是将画布整体缩放而已（连同画布的坐标），并不是设置画布的大小

2.绘制直线

  • 在画布中作图的第一步是获取绘图工具，接着描点，最后将描点的轨迹绘制展现出来，要用到的API：
语法 说明
canvas.getContext("2d") 获取绘图工具
ctx.moveTo(x,y) 将画笔移动到相关坐标
ctx.lineTo(x,y) 画一条直线到相关坐标
ctx.strokeStyle 设置描边的颜色
ctx.lineWidth 设置直线的宽度
ctx.stroke() 将前面画笔的移动轨迹进行描边 
<script>

    var canvas = document.querySelector("canvas")

    // 设置画布大小

    canvas.width = 400

    canvas.height = 200

    // 获取绘图工具

    var ctx = canvas.getContext("2d")

    // 将画笔移动到相关坐标

    ctx.moveTo(100,100)

    // 画一条直线到相关坐标

    ctx.lineTo(300,100)

    // 再画一条直接到相关坐标

    ctx.lineTo(300,150)

    // 设置描边的颜色

    ctx.strokeStyle = "blue"

    // 设置直线的宽度

    ctx.lineWidth = 5

    // 将前面画笔的移动轨迹进行描边

    ctx.stroke()

</script>

  • 注意：绘制直线时，如果坐标是整数，则画出来的直线偏粗
<script>

    //获取容器

    var box = document.querySelector('canvas')

    //获取画笔

    var ctx = box.getContext('2d')

    //设置直线宽度

    ctx.lineWidth = 1

    //颜色

    ctx.strokeStyle = 'black'

    //粗直线(整数坐标)

    ctx.moveTo(50,50)

    ctx.lineTo(500,50)

    //绘制

    ctx.stroke()

    ctx.beginPath()

    //粗直线(小数坐标)

    ctx.moveTo(50,100.5)

    ctx.lineTo(500,100.5)

    //绘制

    ctx.stroke()

</script>

3.设置新的绘制起点

  • 相关语法：ctx.stroke()
  • 由来：重复执行绘制语句时，相关绘制属性会被后面的覆盖(描边颜色，描边宽度等)，例如
<script>

    var canvas = document.querySelector("canvas")

    // 获取绘图工具

    var ctx = canvas.getContext("2d")

    // 绘制一条蓝色的直线

    ctx.moveTo(100,100)

    ctx.lineTo(300,100)

    ctx.strokeStyle = "blue"

    ctx.lineWidth = 5

    ctx.stroke()

    // 再绘制一条绿色的直线

    ctx.moveTo(100,150)

    ctx.lineTo(300,150)

    ctx.strokeStyle = "green"

    ctx.stroke()

</script>

  • 正确示例：使用ctx.beginPath()可以设置新的绘制起点，避免覆盖
<script>

    var canvas = document.querySelector("canvas")

    // 获取绘图工具

    var ctx = canvas.getContext("2d")

    // 绘制一条蓝色的直线

    ctx.moveTo(100,100)

    ctx.lineTo(300,100)

    ctx.strokeStyle = "blue"

    ctx.lineWidth = 5

    ctx.stroke()

    // 再绘制一条绿色的直线

    // 设置新的绘制起点

    ctx.beginPath()

    ctx.moveTo(100,150)

    ctx.lineTo(300,150)

    ctx.strokeStyle = "green"

    ctx.stroke()

</script>

4.填充

  • 设置填充颜色，将轨迹区域进行颜色填充
语法 说明
ctx.fillStyle 设置填充颜色
ctx.fill() 执行填充
  • 注意：填充的时候会将起点和终点自动连接，以形成一个封闭的形状
<script>

    var canvas = document.querySelector("canvas")

    // 获取绘图工具

    var ctx = canvas.getContext("2d")

    // 绘制一条蓝色的直线

    ctx.moveTo(50,50)

    ctx.lineTo(150,50)

    ctx.lineTo(150,150)

    // 描边的直线并没有闭合成一个封闭的形状

    ctx.stroke()

    // 设置填充颜色

    ctx.fillStyle = "yellow"

    // 填充（将起点和终点自动连接，以形成一个封闭的形状）

    ctx.fill()

</script>

5.自动闭合路径

  • 由来：在描边的时候，即使起始点和lineTo结束点的坐标一致，他也无法完全闭合，有缺角
<script>

    var canvas = document.querySelector("canvas")

    // 获取绘图工具

    var ctx = canvas.getContext("2d")

    // 绘制一条蓝色的直线

    ctx.moveTo(50,50)

    ctx.lineTo(200,50)

    ctx.lineTo(200,200)

    ctx.lineTo(50,50)

    // 即使起点终点一致，描边时还是有缺角

    ctx.lineWidth = 8

    ctx.stroke()

</script>

  • 要闭合路径，直接添加 ctx.closePath() ，会自动连接起点和终点，描边时还不会缺角
<script>

    var canvas = document.querySelector("canvas")

    // 获取绘图工具

    var ctx = canvas.getContext("2d")

    // 绘制一条蓝色的直线

    ctx.moveTo(50,50)

    ctx.lineTo(200,50)

    ctx.lineTo(200,200)

    // 自动闭合路径

    ctx.closePath()

    // 即使起点终点一致，描边时还是有缺角

    ctx.lineWidth = 8

    ctx.stroke()

</script>

6.非0环绕规则

  • 问题点：如图，通过绘制直线的形式，画了2个正方形，小的正方形嵌套在大正方形的正中央

  • 由来：如果要对这2个正方形进行填充，问题就来了？是2个都进行填充？还是只填充一个？在这里填充有自己的规则，这个规则被称为非0环绕规则

  • 非0环绕规则：看一块区域是否填充，先从这个区域往外拉一条线，看和这条线相交的轨迹，如果是顺时针就+1，逆时针就-1，如果最终值不等于0，则该区域填充。如果等于0，则该区域不填充

<script>

    var canvas = document.querySelector("canvas")

    // 获取绘图工具

    var ctx = canvas.getContext("2d")

    //绘制两个大小不一的正方形套在一起（200*200 100*100）

    //大正方形顺时针 200*200

    ctx.moveTo(50, 50);

    ctx.lineTo(250, 50);

    ctx.lineTo(250, 250);

    ctx.lineTo(50, 250);

    //自动闭合路径

    ctx.closePath();

    //小正方形逆时针 100*100

    ctx.moveTo(100, 100);

    ctx.lineTo(100, 200);

    ctx.lineTo(200, 200);

    ctx.lineTo(200, 100);

    //自动闭合路径

    ctx.closePath();

    ctx.fillStyle = "yellow"

    ctx.fill()

</script>

canvas(一)描边与填充的更多相关文章

  1. Canvas绘图中的路径描边与填充

    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,博客地址为http://www.cnblogs.com/jasonnode/ .网站上有对应每一 ...

  2. Canvas路径、描边、填充

    <script> var context = document.getElementById('canvas').getContext('2d'); context.font = '48p ...

  3. html5 canvas 弧形描边渐变

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 小程序canvas 圆角框带填充颜色

    // ctx: 获取canvas的id  ---  const ctx = wx.createCanvasContext('canvasId') // x 横坐标 y 纵左边 w 框的宽度 h 框的高 ...

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

    HTML5 Canvas 填充与描边(Fill And Stroke) 演示HTML5 Canvas Fill 与Stroke文字效果,基于Canvas如何实 现纹理填充与描边. 一:颜色填充与描边 ...

  6. 图形处理：给 Canvas 文本填充线性渐变

    作者:凹凸曼 - Barrior 在 Canvas 中对文本填充水平或垂直的线性渐变可以轻易实现,而带角度的渐变就复杂很多:就好像下面这样,假设文本矩形宽为 W, 高为 H, 左上角坐标为 X, Y. ...

  7. HTML5 程序设计 - 使用HTML5 Canvas API

    请你跟着本篇示例代码实现每个示例,30分钟后,你会高喊:“HTML5 Canvas?!在哥面前,那都不是事儿!” 呵呵.不要被滚动条吓到,很多都是代码和图片.我没有分开写,不过上面给大家提供了目录,方 ...

  8. HTML5 学习总结（四）——canvas绘图、WebGL、SVG

    一.Canvas canvas是HTML5中新增一个HTML5标签与操作canvas的javascript API,它可以实现在网页中完成动态的2D与3D图像技术.<canvas> 标记和 ...

  9. canvas小结

    前段时间在公司没什么事干,研究了一下canvas,在实际开发中还没正式应用过,但是已经深深感觉到其魅力之处.下面写一写我认为canvas中比较重要的点,如有理解错误,欢迎指正. 首先canvas是h5 ...

  10. javascript的canvas绘图的基本用法

    <canvas>是HTML里面非常强大的元素,利用它结合js可以实现很多动画效果,大大增强交互性.下面,我想用图文并茂的方式阐述一下canvas的绘图机制的基础内容,话不多说,先上代码: ...

随机推荐

  1. C# and TypeScript – Enum Flags

    前言 以前就有提过 Enum Flags,但平日不常用.最近翻 Angular 源码,发现它很多地方用到,而且没有封装语义代码.一堆符号真的看不惯啊... 于是又去复习了一遍,熟悉熟悉.顺便写一篇做记 ...

  2. CSS – 实战 Font

    前言 这篇想整理一下在网页开发中, 字体是如果被处理的. 先看完: 平面设计 – 字体 CSS – Font / Text 属性 CSS – Font Family CSS – word-break, ...

  3. 音视频入门-7-ffmpeg小实验-v4l2 ubuntu 获取摄像头图像并进行格式转换

    1. Linux内我们使用V4L2框架获取摄像头数据,由于摄像头的不同,摄像头所输出的数据格式各有不同.    考虑到YUV420P 的格式使用最广泛,我们最终将摄像头数据转为该格式. pic_dat ...

  4. AD域下，环境下办公机系统时间不准确

    事件起因: 某部门一同事电脑时间和AD域控时间相差3分钟,虽然说时间相差5分钟内问题不大,但是本着有问题就解决的原则,还是花了点时间去查资料解决. (小小吐槽一下,在我看来域控机是掌管下面所有的办公机 ...

  5. LeetCode 327. Count of Range Sum 区间和的个数

    给定一个整数数组 nums,返回区间和在 [lower, upper] 之间的个数,包含 lower 和 upper.区间和 S(i, j) 表示在 nums 中,位置从 i 到 j 的元素之和,包含 ...

  6. SpringBoot.3中的aot.factories到底有什么用？和以前的spring.factories一样吗？

    首先,我们来澄清一下 aot.factories 和 spring.factories 之间的区别.这两个文件不仅名称不同,而且在功能上也存在显著差异.接下来,我们将深入探讨这两个文件的具体作用以及它 ...

  7. WeiXin.Export.20211230

    C# 在PC上的通过蓝牙(bluetooth)发送数据到手机 将.net framework 4 部署在docker中的全过程(支持4.0 到 4.8,3.5应该也可以) .Net Core Http ...

  8. Go语言中的位运算符

    位运算(bitwise operations)是计算机科学中非常基础且重要的运算类型,它直接操作二进制位.Go语言中提供了一组位运算符,用于执行位级别的操作. Go语言中的位运算符 按位与(& ...

  9. 墨天轮国产数据库沙龙 | 四维纵横姚延栋 ：MatrixDB，All-in-One高性能时序数据库

    分享嘉宾:姚延栋 北京四维纵横数据有限公司创始人.原Greenplum 北京研发中心总经理.Greenplum中国开源社区创始人.PostgreSQL中文社区常委.壹零贰肆数字基金会(非营利组织)联合 ...

  10. docker发布ASPNETCore项目 yum

    docker手动发布ASP.NET Core7 一.环境准备环节 1.准备Linux系统 Linux系统-CentOS7---基于虚拟机来安装 IP:192.168.1.97 2.安装docker环境 ...