canvas开发教程
关注
分享
扫一扫
文章平均质量分 88
canvas相关的示例，很多绘图应用的根基
还是大剑师兰特
美国某知名大学研究生，专业的航天航海交通领域高级前端开发工程师，从事GIS、物联网行业多年，深耕openlayers，leaflet，cesium，mapbox，echarts等领域。
展开
-
canvas实现涂鸦画板功能
canvas如何实现涂鸦画板功能呢？ 我们监听鼠标事件时获取到的坐标是相对于整个页面的坐标（e.clientX 和 e.clientY）。为了将这些坐标转换为相对于 元素自身的坐标，我们需要从这些值中减去 canvas.offsetLeft 和 canvas.offsetTop，确保绘制路径是在 元素的坐标系统内，而不是在整个页面的坐标系统中。原创 2024-02-07 23:09:01 · 1720 阅读 · 23 评论 -
canvas绘制横竖坐标轴（带有箭头和刻度）
canvas如何绘制带有箭头和标有刻度的横竖坐标轴呢？ 首先使用for循环遍历横坐标轴的刻度位置，然后使用beginPath()、moveTo()和lineTo()方法绘制刻度线，接着使用font、textAlign和fillText()方法设置字体样式、对齐方式和填充文本内容，最后使用stroke()方法将它们渲染到画布上。同样的操作也应用于纵坐标轴的刻度。原创 2024-02-08 00:00:00 · 2471 阅读 · 32 评论 -
canvas路径剪裁clip（图文示例）
canvas如何路径剪裁呢？clip()表示路径剪裁。使用时候，先绘制剪裁路径，执行clip()方法，再绘制的内容就在这个剪裁路径中呈现。原创 2024-02-02 06:25:14 · 1651 阅读 · 32 评论 -
canvas绘制二次贝塞尔曲线（ 图文示例 ）
canvas如何绘制二次贝塞尔曲线呢？ 可以使用.quadraticCurveTo()用来绘制二次贝塞尔曲线。它需要两点。`第一个点是控制点，第二个点是终点`。起点是当前路径中的最后一个点，可以在创建二次贝塞尔曲线之前使用 moveTo()更改。原创 2024-02-07 00:00:00 · 1369 阅读 · 2 评论 -
canvas缩放坐标系（scale)
canvas使用scale()来缩放坐标系。它只是影响坐标系，之后的绘制会受此方法影响，但之前已经绘制好的效果不会有任何变化。此缩放支持负数，也支持小数。原创 2024-02-06 00:45:00 · 1432 阅读 · 24 评论 -
canvas设置图形各种混合模式，类似photoshop效果
canvas如何设置图形各种混合模式呢？通过context.globalCompositeOperation = type的方法来实现。这里面的type有很多种。请参考列表。原创 2024-02-04 00:45:00 · 1207 阅读 · 11 评论 -
canvas图片上设置镂空文字效果
canvas图片上如何设置镂空文字效果呢？通过globalCompositeOperation设置就可以。本文设置`context.globalCompositeOperation=‘destination-out’`， 或者`context.globalCompositeOperation=‘xor’` 也是可以的。原创 2024-02-05 00:45:00 · 847 阅读 · 25 评论 -
canvas变换中心点translate ( 图文示例 )
canvas如何变换中心点呢？通过translate设置就可以。`context.translate(x, y)`; x坐标系水平位移的距离。y坐标系垂直位移的距离。原创 2024-02-03 00:00:00 · 895 阅读 · 1 评论 -
canvas设置全局透明度globalAlpha（图文示例）
如何设置canvas的全局透明度呢？通过globalAlpha设置就可以。`context.globalAlpha = value`;其中value就是设置的全局透明度，范围是0到1，范围以外的值会被忽略。使用globalAlpha设置透明度之后都是需要再进行还原设置的，而直接使用RGBA或者HSLA色值则没有这样的重置操作。原创 2024-02-02 00:45:00 · 1795 阅读 · 35 评论 -
canvas测量文字长度（measureText）
如何使用canvas测量一串文字的长度呢？canvas中提供了一个方法measureText，他的测量是非常准确的。 提醒： 在制作这个示例的时候，出现了顺序上的错误，将ctx.font放到了ctx.measureText()的后面，致使测量的数据长度值不正确。 `正确节奏是 先设定字体大小，然后再测量长度`。原创 2024-01-31 00:00:00 · 2733 阅读 · 0 评论 -
canvas自定义扩展方法：文字自动换行
在上一篇文章中，我们了解了[canvas如何新增属性和方法来自定义扩展](https://dajianshi.blog.csdn.net/article/details/135842501)，这篇文章，我们引用别人的一个扩展方法，文字自动换行。具体的使用示例，请参考示例源代码。进一步的讲解，请参考后面的参考资料链接。原创 2024-02-01 00:00:00 · 996 阅读 · 21 评论 -
canvas自定义扩展示例，新增属性和方法
如何使用canvas自定义扩展，新增属性和方法呢？主要通过 `CanvasRenderingContext2D.prototype.属性|方法` 的方式，具体的使用示例，请参考示例源代码。原创 2024-01-29 00:00:00 · 1003 阅读 · 23 评论 -
canvas绘制旋转的大风车
如何使用canvas绘制旋转的大风车呢？这里先通过画半圆的方式，绘制6个半圆组成一个风车的形状。这里面最重要的两点是：使用translate将原点错位到中心，否则rotate会出现问题。 第二点是clearCanvas时候，由于错位了，响应的清除位置要改变一下，设置为translate的负数。原创 2024-01-28 00:00:00 · 1089 阅读 · 11 评论 -
canvas绘制欧盟盟旗（European Union Flag）
如何使用canvas绘制欧盟盟旗呢？思路很简单，绘制蓝色矩形3:2比例，绘制12颗金色五角星，上下做一个布局就可以了。欧洲联盟盟旗是欧洲联盟的旗帜，该旗背景色是蓝色，旗面呈长方形，其长度是宽度的一倍半。等分间隔分布的十二个金星形成一个不可见的圆。原创 2024-01-25 00:00:00 · 988 阅读 · 23 评论 -
canvas绘制美国国旗（USA Flag）
如何使用canvas绘制绘制美国国旗呢？思路很简单，绘制矩形，绘制五角星，上下做一个布局就可以了。美国国旗的形状是长方形；国旗的长宽之比为19:10，由红、白、蓝三色组成；画面格局由两部分组成，旗的左上方蓝底上排列着50颗白色的星，6颗一排与5颗一排相间排列，共排9行；旗的其余部分是13道红白相间的条子，有7道红色横条以及6道白色横条。原创 2024-01-24 00:00:00 · 1440 阅读 · 21 评论 -
canvas绘制旋转的椭圆花
如何使用canvas绘制旋转的椭圆花呢？思路很简单，将同一个中心点的相同的多个椭圆形做角度的旋转。通过循环，均匀的分布在圆点的周围，形成一个花一样的形状。原创 2024-01-23 00:00:00 · 1102 阅读 · 22 评论 -
canvas绘制六芒星
如何使用canvas绘制六芒星呢？它是由由两个正三角形组成 ，这里封装了一个函数regulaPolygon(cxt, n, dx, dy, R, angle, djs_fillColor, djs_strokeColor)，可以设定两个正三边形，两个相差角度为60度。六芒星(Star of David) 又称大卫之星、大卫星、六角星等 六芒星象征着男女合一,孕育生命,代表着融合、圆满、吉祥,是护族符号。原创 2024-01-22 00:00:00 · 1191 阅读 · 22 评论 -
canvas绘制正三边形，正四边形，正五边形...正N边形
如何使用canvas绘制正三边形，正四边形，正五边形...正N边形呢？这里封装了一个函数regulaPolygon(cxt, n, dx, dy, R, angle, djs_fillColor, djs_strokeColor)，可以设定不同的值，来产生不同正多边形。原创 2024-01-21 00:00:00 · 968 阅读 · 1 评论 -
canvas绘制N角形，锯齿状
如何使用canvas绘制锯齿状的N角形呢？这里面要确定N角星围绕中心点的角度是360/N度，这里封装了一个函数star(ctx,n, x, y, R, r, angle,fillColor,strokeColor)，可以设定不同的值，来产生不同样式的N角星。N的值越大，越可以看出是锯齿状。原创 2024-01-20 00:00:00 · 978 阅读 · 0 评论 -
canvas绘制不同样式的六角星（示例源代码）
如何使用canvas绘制不同样式的六角星呢？这里面要确定每个五六角星围绕中心点的角度是60度，这里封装了一个函数star(ctx, x, y, R, r, angle,fillColor,strokeColor)，可以设定不同的值，来产生不同样式的六角星。原创 2024-01-19 00:00:00 · 1090 阅读 · 23 评论 -
canvas绘制不同样式的五角星（图文示例）
如何使用canvas绘制不同样式的五角星呢？这里面要确定每个五角星围绕中心点的角度是72度，这里封装了一个函数star(ctx, x, y, R, r, angle,fillColor,strokeColor)，可以设定不同的值，来产生不同样式的五角星。原创 2024-01-18 10:25:59 · 1594 阅读 · 13 评论 -
canvas绘制美队盾牌
怎样使用canvas绘制美队盾牌呢？这里面要绘制四个不同大小的同心圆，同时在中间位置绘制一个五角星。原创 2024-01-17 04:00:00 · 1092 阅读 · 17 评论 -
canvas截取视频图像（图文示例）
如何使用canvas截取视频图像呢？这里其实是监听了video的内容，将video的当前图像在canvas上面显示出来。原创 2024-01-16 01:00:00 · 2477 阅读 · 41 评论 -
canvas绘制图片的三种方法（图文示例）
如何使用canvas来绘制图片呢？这里有三种方法。语法：drawImage(image, dx, dy)drawImage(image, dx, dy, dWidth, dHeight)drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)原创 2024-01-16 00:00:00 · 3157 阅读 · 16 评论 -
canvas创建图像数据，并在画布上展示
如何使用canvas来创建图像数据呢？ canvas createImageData() 方法返回一个图像的数据值。## 语法：>createImageData(width, height)createImageData(width, height, settings)createImageData(imagedata)原创 2024-01-15 01:00:00 · 1503 阅读 · 8 评论 -
canvas圆锥形渐变（图文示例）
如何使用canvas设置圆锥形渐变呢？ canvas createConicGradient() 方法返回一个圆锥形 CanvasGradient。 要应用于形状，必须首先将渐变指定给 fillStyle 或 strokeStyle 属性。原创 2024-01-14 01:00:00 · 1407 阅读 · 16 评论 -
canvas设置图形图案、文字图案
如何使用canvas设置图形图案、文字图案呢？ canvas createPattern() 方法在指定的方向内重复指定的元素。元素可以是图片、视频，或者其他 元素。被重复的元素可用于绘制/填充矩形、圆形或线条等等。原创 2024-01-14 00:00:00 · 1065 阅读 · 1 评论 -
canvas设置渐变色文字（线性、径向）
如何使用canvas设置渐变色文字呢？这里分为设置线性渐变（createLinearGradient）和径向渐变（createRadialGradient）。请使用该对象作为 strokeStyle 或 fillStyle 属性的值。原创 2024-01-13 00:00:00 · 2976 阅读 · 11 评论 -
canvas绘制流动的蚂蚁线（图文示例）
如何使用canvas绘制流动的蚂蚁线呢？这里的蚂蚁线用到了设置虚线的方法setLineDash（），同时更为重要的是设定lineDashOffset。这个值的渐变，同时清除和重绘线框，给人以流动起来的视觉效果。具体的实现，请参考示例源代码。原创 2024-01-12 00:00:00 · 1522 阅读 · 18 评论 -
canvas设置线条样式（宽度，端点形态、拐点样式、虚线）
- lineWidth: 设置线条宽度。 - lineCap: 设置线条末端样式。 - lineJoin: 设定线条与线条间接合处的样式。 - miterLimit: 限制当两条线相交时交接处最大长度；所谓交接处长度（斜接长度）是指线条交接处内角顶点到外角顶点的长度。 - setLineDash() 设置虚线、点划线等。原创 2024-01-11 00:00:00 · 1907 阅读 · 6 评论 -
重新认识canvas，掌握必要的联结密码
canvas是 HTML5 提供的一种新标签，通常被称为画布。是一个可以使用脚本(通常为JavaScript)来绘制图形的 HTML 元素。通过api提供了一种绘制的能力，它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。Canvas API 主要聚焦于2D图形。而同样使用Canvas元素的WebGL API 则用于绘制硬件加速的2D和3D图形。原创 2024-01-10 01:00:00 · 1260 阅读 · 11 评论 -
canvas绘制路径之 beginPath() 和 closePath()
绘制路径的步骤 - 首先，需要创建路径起始点。 - 然后使用画图方法去画出路径 - 把路径封闭。 - 一旦路径生成，就可以通过描边或填充路径区域来渲染图形。在这篇文章中，我们着重关注`beginPath()` 和 `closePath()`原创 2024-01-10 00:00:00 · 2317 阅读 · 18 评论 -
canvas设置空心文字（图文示例）
如何使用canvas设置空心文字呢？canvas内置了一个设置空心文字的方法，使用ctx.strokeText即可。在之前的文章中，我们谈到[设置实心的文字](https://blog.csdn.net/cuclife/article/details/135370176)。 文字的填充色使用fillStyle，文字的边框颜色使用strokeStyle。文字的大小和文字使用ctx.font来做设置。原创 2024-01-07 00:03:58 · 1319 阅读 · 5 评论 -
canvas 实心文字设置（含最大宽度）的示例
如何使用canvas设置文字呢？canvas内置了一个阴影的方法，使用ctx.fillText即可。文字的填充色使用fillStyle，文字的边框颜色使用strokeStyle。文字的大小和文字使用ctx.font来做设置。原创 2024-01-06 00:30:00 · 1342 阅读 · 7 评论 -
canvas设置图形的阴影
如何使用canvas设置文字阴影呢？canvas内置了一个阴影的方法，使用ctx.shadowBlur即可。图形的填充色使用fillStyle，图形的边框颜色使用strokeStyle。原创 2024-01-06 00:00:00 · 1183 阅读 · 0 评论 -
canvas设置文字阴影
如何使用canvas设置文字阴影呢？canvas内置了一个阴影的方法，使用ctx.shadowBlur即可。文字的填充色使用fillStyle，文字的边框颜色使用strokeStyle。语法：>context.shadowBlur = value;原创 2024-01-05 00:30:00 · 1249 阅读 · 23 评论 -
canvas绘制椭圆形示例
如何使用canvas绘制直椭圆形呢？canvas内置了一个椭圆形的方法，使用ctx.ellipse即可。语法：>context.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise);原创 2024-01-04 00:30:00 · 1565 阅读 · 19 评论 -
canvas绘制直角梯形（向左）
canvas示例教程100+专栏，提供canvas的基础知识，高级动画，相关应用扩展等信息。canvas作为html的一部分，是图像图标地图可视化的一个重要的基础，学好了canvas，在其他的一些应用上将会起到非常重要的帮助。原创 2024-01-05 00:00:00 · 1032 阅读 · 28 评论 -
canvas绘制直角梯形（向右）
如何使用canvas绘制直角梯形呢？方法其实很简单，先定位到起始点，然后不停的连线，最后填充颜色和边框。这里面要确定好四个顶点的位置。 下面是大剑师的一个示例，供参考：原创 2024-01-04 00:00:00 · 1147 阅读 · 28 评论 -
canvas绘制圆角矩形示例
如何使用canvas绘制圆角矩形呢？方法其实很简单，先画一个圆弧，然后跟随着画直线，四个相连，最终成为一个圆角矩形。这里面较难的是统筹圆弧的位置和直线的位置原创 2024-01-03 00:30:00 · 1543 阅读 · 30 评论