颜色合成 globalCompositeOperation 属性：?1234567891011//先绘制一个图形。ctx.fillStyle = "#00ff00";ctx.fillRect(10,10,50,50);//设置 lobalCompositeOperation 属性。ctx.globa...
转载
2015-04-02 09:44:00
86阅读
2评论
文章目录一、canvas在移动端自适应大小canvas坑1：设置canvas的css的宽高会导致你的填充内容被拉伸canvas坑1解决办法：解决后的代码与效果
原创
2022-01-18 10:55:17
236阅读
文章目录一、canvas在移动端自适应大小canvas坑1：设置canvas的css的宽高会导致你的填充内容被拉伸canvas坑1解决办法：解决后的代码与效果如下：canvas坑2：不能设置css属性如何让它自适应？canvas坑2解决办法：二、设置背景色，画填充色三、填充字体、设置字体大小、粗体、颜色、文本X,Y轴居中对齐canvas坑3：设置完背景色设置文字失败？四、canvas填充字体模糊的...
原创
2021-06-18 18:23:37
770阅读
先定义一下画笔然后学习平移操作translate(sx,sy) ,画布沿着X轴方向和y轴方向进行平移缩放操作scale(sx,sy) ,画布沿着x轴方向和y轴方向进行比例缩放 ,scale(sx,sy,translateX,translateY)这个方法执行了3行代码translate(px, py);scale(sx, sy);translate(-px...
原创
2023-04-06 11:34:48
154阅读
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; chars
原创
2017-04-03 23:34:07
670阅读
canvas这是一个非常强大的画图工具，既能划线，还能画图，最牛逼的是还能用来讨女朋友开心，啧啧啧。 ###canvas基础使用 计算机主要掌握方式就是练，所以我们直接上代码。 ####创建一个画布 <canvas id='canvas1' ref='canvas1' style="width: 1 ...
转载
2021-10-07 18:33:00
180阅读
2评论
有时我们会在简历或者图标中用到弧形，这里给出制作弧形的代码
原创
2022-12-02 00:10:42
99阅读
首先，创建一个自定义组件，继承自Component类，并重写onDraw方法，在该方法中使用Canvas进行绘图。build() {paint.setColor(C现丰富的视觉效果和交互体验。
概述Canvas 是 HTML5 提供的图形绘制元素，通过 JavaScript API 实现动态、可交互的 2D 图形渲染。它不依赖外部插件，是现代 Web 图形开发的核心技术之一。基本用法1. 创建 Canvas 元素<canvas id="myCanvas" width="800" height="600">
您的浏览器不支持 Canvas，请升级浏览器
</canva
本文学习资源来自《HTML5 Canvas核心技术 图形、动画与游戏开发》为了让HTML控件放到canvas范围内
原创
2017-12-07 08:22:01
175阅读
canvas标签中写入的HTML内容只有在游览器不支持canvas的时候才会显示，一般情
原创
2022-10-21 16:48:23
58阅读
文章目录Canvas画笔的基本使用图形绘制设置样式画笔实例练习渐变色绘制镂空的房子绘制坐标网格绘制坐标系绘制坐标点绘制折线图参考文档Canvas画笔的基本使用图形绘制需要理解些概念：路径的概念路径的绘制描边 stroke()填充 fill()闭合路径手动闭合程序闭合 closePath()填充规则(非零环绕)开启新的路径 beginPath()设置样式画笔的状态lineWidth 线宽，默认1pxlineCap 线末端类型：(butt默
原创
2021-02-03 13:02:20
673阅读
关键点canvas.drawBitmap(bitmap, srcRect, dstRect, null);将bitmap的srcRect区域绘制到canvas的dstRect
原创
2022-10-20 10:29:23
161阅读
画一个矩形//创建一个画布const ctx = wx.createCanvasContext('myCanvas')// 设置矩形边框ctx.setStrokeStyle('#fff')// 设置矩形宽高 四个参数，前俩个为x，y轴，后俩个是矩形的宽和高在画布上填充文字// 设置文字大小ctx.setFontSize(14)// 设置文字颜色ctx.fillS...
原创
2018-09-15 14:54:33
130阅读
HTML5的元素提供了一组JavaScript API，让我们可以动态地创建图形和图像。图形是在一个特定的上下文中创建的，而上下文对象目前有两种。第一种是2D上下文，可以执行原始的绘图操作，比如：设置填充、描边颜色和模式；绘制矩形；绘制路径；绘制文本；创建渐变和模式。第二种是3D上下文，即WebGL上下文。WebGL是从OpenGLES2.0移植到浏览器中的，而OpenGLES2.0是游
原创
2021-06-04 15:06:48
2685阅读
最近开发的一个项目需要用到签字功能，本来vue2.0可以直接
使用vue-esign插件，实现签字。多么的方便，奈何项目
使用vue3.0开发vue-esign不好使，那就只能自己动手封装一个签字组件了。 签字功能实际上就是获取鼠标运动轨迹并将轨迹绘画出来而已 <template> <div class ...
转载
2021-09-30 13:48:00
204阅读
2评论
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><style>.ggk { width: 200px; height: 100px; border: 1px solid #000; margin: 0 auto;
原创
2023-02-01 09:48:46
147阅读
1、画布元素的使用1.1 绘制线条画布的作用Canvas 元素作为HTML5标准的一部分，
原创
2022-09-13 12:16:45
296阅读
故事起因我是一个魔方爱好者（只是爱好，但技术并不强），在大学期间担任过魔方社社长，每到招新的时候，一般都会用上千个魔方拼出招新二维码，显得比较有逼格
原创
2024-05-06 16:22:25
167阅读
