系列文章目录

第一节 Canvas—从零开始手把手教会

文章目录

  • 系列文章目录
  • 本文你将会学会如何使用canvas绘画优美的线条
    • 线条属性
      • lineCap
      • 线段的链接 lineJoin
      • 填充渐变形状
      • 径向渐变
      • 填充纹理
        • 创建并填充图案
    • 绘制标准圆弧
      • 高级路径
        • 使用`arc()`绘制圆弧
      • 绘制圆角矩形
      • 使用切点绘制圆弧

本文你将会学会如何使用canvas绘画优美的线条

如果您从还未使用过canvas,推荐看这篇文章帮助您快速度过新手村
Canvas–零开始绘画矩形

线条属性

1、lineCap属性

lineCap 定义上下文中线的端点，可以有以下 3 个值。

  • butt：默认值，端点是垂直于线段边缘的平直边缘。
  • round：端点是在线段边缘处以线宽为直径的半圆。
  • square：端点是在选段边缘处以线宽为长、以一半线宽为宽的矩形。

2、lineJoin属性

lineJoin 定义两条线相交产生的拐角，可将其称为连接。在连接处创建一个填充三角形，可以使用 lineJoin 设置它的基本属性。

  • miter：默认值，在连接处边缘延长相接。miterLimit 是角长和线宽所允许的最大比例(默认是 10)。
  • bevel：连接处是一个对角线斜角。
  • round：连接处是一个圆。

3、线宽
lineWidth 定义线的宽度(默认值为 1.0)。

4、笔触样式
strokeStyle 定义线和形状边框的颜色和样式。

后面两个前面已经说过了，这里我们着重来看看前两个属性。

lineCap

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><canvas id="canvas" style="border: 1px solid #aaaaaa; margin: 50px auto;" width="800" height="600">你的浏览器居然不支持Canvas.</canvas><script>window.onload = function(){var canvas = document.getElementById("canvas");canvas.width = 800;canvas.height = 600;var context = canvas.getContext("2d");context.lineWidth = 50;context.strokeStyle = "#1BAAAA";context.beginPath();context.moveTo(100,100);context.lineTo(700,100);context.lineCap = "butt";context.stroke();context.beginPath();context.moveTo(100,300);context.lineTo(700,300);context.lineCap = "round";context.stroke();context.beginPath();context.moveTo(100,500);context.lineTo(700,500);context.lineCap = "square";context.stroke();//下面画两个基准线方便观察context.lineWidth = 3;context.strokeStyle = "black";context.beginPath();context.moveTo(100,0);context.lineTo(100,600);context.moveTo(700,0);context.lineTo(700,600);context.stroke();}</script>
</body>
</html>

演示图：

线段的链接 lineJoin

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><canvas id="canvas" style="border: 1px solid #aaaaaa; margin: 50px auto;" width="800" height="600">你的浏览器居然不支持Canvas.</canvas><script>window.onload = function(){var canvas = document.getElementById("canvas");canvas.width = 800;canvas.height = 600;var context = canvas.getContext("2d");context.beginPath();context.moveTo(100,100);context.lineTo(300,300);context.lineTo(100,500);context.lineJoin = "miter";context.lineWidth = 20;context.strokeStyle = "red";context.stroke();context.beginPath();context.moveTo(300,100);context.lineTo(500,300);context.lineTo(300,500);context.lineJoin = "bevel";context.lineWidth = 20;context.strokeStyle = "blue";context.stroke();context.beginPath();context.moveTo(500,100);context.lineTo(700,300);context.lineTo(500,500);context.lineJoin = "round";context.lineWidth = 20;context.strokeStyle = "black";context.stroke();}function drawRect(ctx, x, y, width, height, fillColor, borderWidth, borderColor){ctx.beginPath();ctx.rect( x, y, width, height)ctx.lineWidth = borderWidth;ctx.strokeStyle = borderColor;ctx.fillStyle = fillColor;ctx.fill();ctx.stroke();}</script>
</body>
</html>

演示图：

填充渐变形状

  1. 添加渐变线：

    var grd = context.createLinearGradient(xstart,ystart,xend,yend);

  2. 为渐变线添加关键色(类似于颜色断点)：

    grd.addColorStop(stop,color);

这里的stop传递的是 0 ~ 1 的浮点数，代表断点到(xstart,ystart)的距离占整个渐变色长度是比例。

  1. 应用渐变：

    context.fillStyle = grd;
context.strokeStyle = grd;

eg：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><canvas id="canvas" style="border: 1px solid #aaaaaa; margin: 50px auto;" width="800" height="600">你的浏览器居然不支持Canvas.</canvas><script>window.onload = function(){var canvas = document.getElementById("canvas");canvas.width = 800;canvas.height = 600;var context = canvas.getContext("2d");context.rect(200,100,400,400);// 1.添加渐变线 (200, 300) ==> (600, 300)var grd = context.createLinearGradient(200, 300, 600, 300)// 2.添加关键色grd.addColorStop(0, 'grey')grd.addColorStop(0.5, 'lightblue')grd.addColorStop(1, 'lightyellow')// 3.应用渐变context.fillStyle = grdcontext.fill()}function drawRect(ctx, x, y, width, height, fillColor, borderWidth, borderColor){ctx.beginPath();ctx.rect( x, y, width, height)ctx.lineWidth = borderWidth;ctx.strokeStyle = borderColor;ctx.fillStyle = fillColor;ctx.fill();ctx.stroke();}</script>
</body>
</html>

演示图：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><canvas id="canvas" style="border: 1px solid #aaaaaa; margin: 50px auto;" width="800" height="600">你的浏览器居然不支持Canvas.</canvas><script>window.onload = function(){var canvas = document.getElementById("canvas");canvas.width = 800;canvas.height = 600;var context = canvas.getContext("2d");var grd = context.createLinearGradient(100,300,700,300);//添加颜色断点grd.addColorStop(0,"olive");grd.addColorStop(0.25,"maroon");grd.addColorStop(0.5,"aqua");grd.addColorStop(0.75,"fuchsia");grd.addColorStop(0.25,"black");//应用渐变context.fillStyle = grd;context.strokeStyle = grd;context.strokeRect(200,50,300,50);context.strokeRect(200,100,150,50);context.strokeRect(200,150,450,50);context.fillRect(200,300,300,50);context.fillRect(200,350,150,50);context.fillRect(200,400,450,50);context.fillRect(0,550,800,25);}</script>
</body>
</html>

径向渐变

  1. 添加渐变圆：

    var grd = context.createRadialGradient(x0,y0,r0,x1,y1,r1);

  2. 为渐变线添加关键色(类似于颜色断点)：

    grd.addColorStop(stop,color);

  3. 应用渐变：

    context.fillStyle = grd;
context.strokeStyle = grd;

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><canvas id="canvas" style="border: 1px solid #aaaaaa; margin: 50px auto;" width="800" height="600">你的浏览器居然不支持Canvas.</canvas><script>window.onload = function(){var canvas = document.getElementById("canvas");canvas.width = 800;canvas.height = 600;var context = canvas.getContext("2d");var grd = context.createRadialGradient(400,300,100,400,300,400);//添加颜色断点grd.addColorStop(0,"olive");grd.addColorStop(0.25,"maroon");grd.addColorStop(0.5,"aqua");grd.addColorStop(0.75,"fuchsia");grd.addColorStop(1,"black");//应用渐变context.fillStyle = grd;context.fillRect(100,100,600,400);}</script>
</body>
</html>

演示图:

填充纹理

纹理其实就是图案的重复，填充图案通过createPattern()函数进行初始化。它需要传进两个参数createPattern(img,repeat-style)，第一个是Image对象实例，第二个参数是String类型，表示在形状中如何显示repeat图案。可以使用这个函数加载图像或者整个画布作为形状的填充图案。

有以下4种图像填充类型：

  • 平面上重复：repeat;
  • x轴上重复：repeat-x;
  • y轴上重复：repeat-y;
  • 不使用重复：no-repeat;

创建并填充图案

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><canvas id="canvas" style="border: 1px solid #aaaaaa; margin: 50px auto;" width="800" height="600">你的浏览器居然不支持Canvas.</canvas><script>window.onload = function(){var canvas = document.getElementById("canvas");canvas.width = 800;canvas.height = 600;var context = canvas.getContext("2d");const img = new Image()img.src = 'https://tse2-mm.cn.bing.net/th/id/OIP-C.MFrj4rjM7ElBNf6yBZ85AwHaH6?w=175&h=187&c=7&r=0&o=5&pid=1.7'img.onload = function(){const pattern = context.createPattern(img, 'repeat')context.fillStyle = patterncontext.fillRect(100, 100, 600, 400)}}</script>
</body>
</html>

演示图：

绘制标准圆弧

高级路径

我们要挑战路径的最难的部分了——高级路径，之前一直都是在学习绘制线条，接下来的我们详细看看绘制曲线（高级路径）的有关方法。

  • 标准圆弧：arc()
  • 复杂圆弧：arcTo()
  • 二次贝塞尔曲线：quadraticCurveTo()
  • 三次贝塞尔曲线：bezierCurveTo()

使用arc()绘制圆弧

arc()的使用方法如下：

context.arc(x,y,radius,startAngle,endAngle,anticlockwise)

前面三个参数，分别是圆心坐标与圆半径。startAngle、endAngle使用的是弧度值，不是角度值。 弧度的规定是绝对的。anticlockwise表示绘制的方法，是顺时针还是逆时针绘制。它传入布尔值，true表示逆时针绘制，false表示顺时针绘制，缺省值为false。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><canvas id="canvas" style="border: 1px solid #aaaaaa; margin: 50px auto;" width="800" height="600">你的浏览器居然不支持Canvas.</canvas><script>window.onload = function(){var canvas = document.getElementById("canvas");canvas.width = 800;canvas.height = 600;var context = canvas.getContext("2d");![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/450f771aa75c4df99bf9563dbc10fdbf~tplv-k3u1fbpfcp-watermark.image?)context.arc(400, 300, 200, Math.PI,2*Math.PI) //顺时针context.fill()}</script>
</body>
</html>

演示图：

绘制圆角矩形

下面，我们结合基本路径和高级路径的知识，绘制一个圆角矩形。

圆角矩形是由四段线条和四个1/4圆弧组成，拆解如下。

因为我们要写的是函数而不是一个固定的圆角矩形，所以这里列出的是函数需要的参数。分析好之后，直接敲出代码。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><canvas id="canvas" style="border: 1px solid #aaaaaa; margin: 50px auto;" width="800" height="800">你的浏览器居然不支持Canvas.</canvas><script>window.onload = function(){var canvas = document.getElementById("canvas");canvas.width = 800;canvas.height = 800;var context = canvas.getContext("2d");context.fillStyle = "#FFF";context.fillRect(0,0,800,600);drawRoundRect(context, 200, 200, 400, 400, 50);context.strokeStyle = "#0078AA";context.stroke();}function drawRoundRect(cxt, x, y, width, height, radius){cxt.beginPath();cxt.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 3 / 2);cxt.lineTo(width - radius + x, y);cxt.arc(width - radius + x, radius + y, radius, Math.PI * 3 / 2, Math.PI * 2);cxt.lineTo(width + x, height + y - radius);cxt.arc(width - radius + x, height - radius + y, radius, 0, Math.PI * 1 / 2);cxt.lineTo(radius + x, height +y);cxt.arc(radius + x, height - radius + y, radius, Math.PI * 1 / 2, Math.PI);cxt.closePath();}</script>
</body>
</html>

演示图

使用切点绘制圆弧

arcTo()方法接收5个参数，分别是两个切点的坐标和圆弧半径。这个方法是依据切线画弧线，即由两个切线确定一条弧线。 具体如下。

arcTo(x1,y1,x2,y2,radius)

这个函数以给定的半径绘制一条弧线，圆弧的起点与当前路径的位置到(x1, y1)点的直线相切，圆弧的终点与(x1, y1)点到(x2, y2)的直线相切。因此其通常配合moveTo()或lineTo()使用。其能力是可以被更为简单的arc()替代的，其复杂就复杂在绘制方法上使用了切点。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><canvas id="canvas" style="border: 1px solid #aaaaaa; margin: 50px auto;" width="800" height="800">你的浏览器居然不支持Canvas.</canvas><script>window.onload = function(){var canvas = document.getElementById("canvas");canvas.width = 800;canvas.height = 600;var context = canvas.getContext("2d");context.fillStyle = "#FFF";context.fillRect(0,0,800,600);drawArcTo(context, 200, 200, 600, 200, 600, 400, 100);};function drawArcTo(cxt, x0, y0, x1, y1, x2, y2, r){cxt.beginPath();cxt.moveTo(x0, y0);cxt.arcTo(x1, y1, x2, y2, r);cxt.lineWidth = 6;cxt.strokeStyle = "red";cxt.stroke();cxt.beginPath();cxt.moveTo(x0, y0);cxt.lineTo(x1, y1);cxt.lineTo(x2, y2);cxt.lineWidth = 1;cxt.strokeStyle = "#0088AA";cxt.stroke();}</script>
</body>
</html>

演示图

Canvas—绘画圆弧相关推荐

  1. 用canvas绘画一些图形（图标）

    最近在研究HTML5,发现其中的canvas用途很广.不但可以绘制图形,还可以制作图片线性渐变,而且还能渲染文字做成特效. 是 HTML5 新增的,一个可以使用脚本(通常为JavaScript)在其中 ...

  2. 微信小程序canvas 绘画组件的使用，画图

    微信小程序canvas 绘画组件的使用,画图 canvas 绘画组件 文章目录 微信小程序canvas 绘画组件的使用,画图 闲来没事写个画图的小工具吧,于是就用到了小程序的canvas组件 一.先来 ...

  3. 前端小项目：使用canvas绘画哆啦A梦

    最近在学canvas元素,<canvas>标签只是图形容器,必须使用js来绘制图形.为了增强对canvas元素的理解,于是用canvas画了一个哆啦A梦来 要实现的效果图 在线预览 要想绘 ...

  4. HTML用画布画哆啦A梦,前端小项目：使用canvas绘画哆啦A梦

    最近在学canvas元素,标签只是图形容器,必须使用js来绘制图形.为了增强对canvas元素的理解,于是用canvas画了一个哆啦A梦来 要实现的效果图 要想绘画出这个哆啦a梦首先要掌握以下一些函数 ...

  5. canvas 绘制圆弧

    前面给大家讲解了怎么绘制矩形和线条,接下来将讲解下如何在 canvas 画布上 绘制圆弧和圆形. 相对矩形来说,绘制圆弧则更为复杂.绘制圆弧需要确定圆心的坐标,圆弧的角度以及绘制圆弧的绘制方法等等. ...

  6. [Canvas系列]Canvas绘制圆弧形状_04

    canvas里画曲线的难点之一,就在于他连曲线的函数就有4个!分别是arc,arcTo,quadraticCurveTo,bezierCurveTo.我从最简单的arc方法讲起吧. arc的作用是画一 ...

  7. 前端画圆弧html弧线的像素,使用canvas绘制圆弧动画

    效果预览 canvas 绘制基本流程 初始画布 对于canvas的绘制,首先需要在html内指定一块画布,即, 可以看做是在PS中新建一个空白文档,之后所有的操作都将呈现在这个文档之上,与PS的区别是 ...

  8. canvas绘画七巧板

    个人刚开始学canvas: 第一:获取canvas标签: document.getElementById('canvas') 第二:创建 context 对象,canvas.getContext('2 ...

  9. javascript 使用canvas绘画

    1 基本用法 1 必须支持<canvas>元素 <canvas id="drawing" width="200" height="2 ...

  10. 【绘制】HTML5 Canvas绘画画板小项目：可编辑控制的贝塞尔曲线（可控制锚点和控制点的位置）

    介绍 之前,我们说了贝塞尔曲线的绘制,但那个演示效果只是演示贝塞尔曲线但死页面,这节来实现一个可以编辑和控制的贝塞尔曲线. 在线演示  详细代码 代码解读 在详细代码中,综合了直线.圆弧.阴影.背景网 ...

最新文章

  1. 职称计算机考试word2003真题,职称计算机考试《Word2003》历年真题回顾(4)
  2. dynamic和var的区别
  3. auto-sklearn详解
  4. Qt Creator构建并运行示例
  5. QT的QAudioProbe类的使用
  6. 从一个 SAP CRM 软件实际的故障处理出发，谈谈企业管理软件领域内那些很难稳定重现故障的处理技巧
  7. ES5 数组扩展方法 forEach/filter/map的使用与重写
  8. 力扣面试题 01.08. 零矩阵
  9. 一个显示日期的工具类
  10. 用户代码未处理nullreferenceexception_CSAPP 第九章整理 未完成
  11. android怎么引用ttf字体,android 自定义字体ttf使用的几种方法
  12. squid 日志清理
  13. java流程图平行四边形_流程图图形标准含义
  14. uniapp背景色跟随轮播图改变 vue
  15. 1.1 Access 简介
  16. 线性系统理论3 状态空间描述 方框图
  17. 国家开放大学人文英语4
  18. Educational Codeforces Round 91 (Rated for Div. 2) D.Berserk And Fireball(思维，暴力破解，分情况)
  19. js数组方法及返回值
  20. set_set_switching_activity

热门文章

  1. Codeforces407C Curious Array
  2. 嘉兴 机器人仓库 菜鸟_菜鸟在嘉兴推出全新智能仓 宣布将在双11启用超级机器人仓群...
  3. 用计算时间差计算出天数
  4. 二重积分的计算 —— 交换积分顺序（exchange the order of integration）
  5. 【渝粤教育】国家开放大学2018年秋季 3939T★汽车电控技术 参考试题
  6. Clean Architecture 读书笔记
  7. 基于三层交换技术的校园网设计与实现
  8. 从零开始写一个RTSP服务器（一）RTSP协议讲解
  9. 自定义CDH parcel
  10. WordPress SEO优化：纯代码添加canonical标签