- 综合排序
- 最热优先
- 最新优先
- 来自专栏橙光笔记
Canvas系列（5）：绘制文字
通过前面的学习，我们已经可以绘制简单的图形了。这篇文章主要讲的是，canvas绘制文字，那我们开始吧。 ---- 绘制文字 绘制文字的API和之前的差不多，也是分为stroke和fill，一个是描边文字，一个是填充文字，具体API如下，是不是和strokeRect和fillRect挺类似的： // 描边文字 measureText 有的时候我们需要让文字水平居中，而上面你也看到了，绘制文字传递的参数x和y是基于左上角的坐标来绘制的（默认情况下），这就需要计算一下文字的宽度，measureText就是用来干这事的 context.font='30px 微软雅黑'; var text = "文本水平居中"; // 设置文本居中 context.textAlign='center'; // 然后在画布水平的中间位置绘制文字
4.6K32发布于 2020-10-19 - 来自专栏python机器学习深度学习资料
HTML5图形绘制
HTML5中的<canvas>标签结合JavaScript可以完成图形的绘制。<canvas>标签是图形容器，使用脚本来绘制绘制路径、盒子、圆、字符等图形。 一个画布在网页中是一个矩形框，通过<canvas>标签来绘制，<canvas>标签默认没有边框和内容，需要使用style属性来添加边框。 document.getElementById("myCanvas"); //找到<canvas>元素 var ctx=c.getContext("2d"); //创建 context 对象 //getContext("2d")是内建的HTML5对象 fillRect(0,0,150,100)是指在画布上绘制150100的矩形，从左上角开始(0,0)。画布上的X和Y坐标用于在画布上对绘画进行定位，鼠标移动的矩形框上，显示定位坐标。 在canvas上绘制路径，需要利用moveTo(x,y)和lineTo(x,y)分别定义路径开始坐标和结束坐标，利用stroke()方法绘制出通过moveTo(x,y)和lineTo(x,y)方法定义的路径
3K00发布于 2018-12-27 - 来自专栏个人编程笔记
H5-使用canvas绘制
浏览量 1 canvas标签用于绘制图画，它是通过js来实现图画的绘制，这里将学习一下其基本用法。 首先，创建一个画布，这样我们就可以在上面进行创作了。 <! ctx.stroke(); </script> 然后，我们来绘制一条折线，画一条有一个拐角的折线，我们可以想象一下我们用画笔是怎么画的，这里的绘制也是同样的画法，确定三个点，起点，转折点，终点 ，首先确定矩形左上点坐标，然后给出矩形的宽和高就能绘制出来。 my_gradient.addColorStop(1,"green"); //笔触样式 ctx.strokeStyle=my_gradient; ctx.lineWidth=5; 10个会让你惊叹不已的HTML5画布(CANVAS)技术应用演示 http://www.uisdc.com/html5-canvas-demo-10
1.4K20编辑于 2023-03-03 - 来自专栏Stephen
Html5 Canvas绘制时钟
用H5绘制一个模拟时钟，效果图： html <canvas id="clock" width="500px" height="500px" style="background-color: hour-12:hour; //绘文字 cxt.font="normal 20px arial" cxt.fillStyle='#00f'; cxt.fillText('Canvas绘制模拟时钟 ',50,50); //表盘 cxt.lineWidth=5; cxt.strokeStyle="blue"; cxt.beginPath(); cxt.arc(250,250,95,0,360
1.4K20编辑于 2022-06-07 - 来自专栏python3
5-3 绘制图形
5-3 绘制图形 本节学习目标： n绘制曲线基本要点 n图形类控件的使用 nSystem.Drawing.Drawing2D 5-3-1 绘制曲线 基本形状的绘制，我们可以从图形类提供的方法中找到解决方案 图5-7 坐标轴的绘制 u 实验步骤（2）：修改源代码如下所示： Pen myPen = new Pen(Color.Blue, 3); Point oo1 = new Point(30, this.ClientSize.Height 图5-9 平面饼图 这里绘制的是二维饼图，如果希望画出立体效果，可以使用前面介绍的方法画出圆柱体的效果，立体的部分采用黑色阴影处理即可。 主要属性和方法定义如表5-5所示： 属性 说明 Image 设置或获取与该控件显示的图像 SizeMode 指示如何显示图像 方法 说明 Load 显示图像 表5-5 PictureBox控件属性及方法 图5-12 在图像上添加文字 问题讨论： 执行完上面的代码，并没有在图像上看到绘制的图形，为什么？ 需要对图像刷新。
2.4K10发布于 2020-01-08 - 来自专栏机器学习/数据可视化
pyecharts-5-绘制柱状图
Pyecharts-5-绘制柱状图Bar 本文中介绍的是如何利用pyecharts中绘制各种bar柱状图。 / (18 + 3)}, {"value": 23, "percent": 23 / (23 + 21)}, {"value": 33, "percent": 33 / (33 + 5) {"value": 3, "percent": 3 / (18 + 3)}, {"value": 21, "percent": 21 / (23 + 21)}, {"value": 5, "percent": 5 / (33 + 5)} ] c = ( Bar(init_opts=opts.InitOpts(theme=ThemeType.LIGHT)) # 使用的主题 opts.DataZoomOpts(type_="inside")], ) # .render("bar_datazoom_both.html") ) c.render_notebook() 绘制直方图
1.1K20发布于 2021-03-01 - 来自专栏数据猿
Python Seaborn (5) 分类数据的绘制
在 Seaborn 中，相对低级别和相对高级别的方法用于定制分类数据的绘制图，上面列出的函数都是低级别的，他们绘制在特定的 matplotlib 轴上。 对于其他数据类型，字符串类型的类别将按照它们在 DataFrame 中显示的顺序进行绘制，但是数组类别将被排序： ? 除了颜色之外，还可以使用不同的散点图标记来使黑色和白色的图像更好地绘制。 您还可以完全控制所用的颜色： ? 最后，在绘制提琴图的时候有几个选项，包括显示每个人的观察结果而不是总结框图值的方法： ? 当然，这也意味着这些图块可以和其他种类的图块一起在一个多面板的绘制中共存： ? 绘制多层面板分类图 正如我们上面提到的，有两种方法可以在 Seaborn 中绘制分类图。
5.4K20发布于 2019-03-06 - 来自专栏四月天的专栏
PyQt5:PyChart绘制饼图
PyQt5: QChart 绘制饼图 1.开发环境说明： 系统环境 ：Win10 IDE：VS2017+PyQt5.12+Python3.7 2.相关调用库： from ui import Ui_Form from PyQt5.QtGui import * from PyQt5.QtWidgets import * from PyQt5.QtCore import * from PyQt5.QtChart self.pieseries.append("Andy",3) self.pieseries.append("Barbara",4) self.pieseries.append("Axel",5) Joe",2) self.m_list = [self.slice_1,self.slice_2] self.pieseries.append(self.m_list) 4.运行界面如下： 5.
83320编辑于 2023-03-10 - 来自专栏四月天的专栏
Pyqt5:Qpainter绘制基础图形（一）
这一节是pyqt5的QPainter绘制基础图形。 painter.setPen(QColor(166,66,250)) painter.begin(self) painter.draw-----#绘制函数 painter.drawText(120,120,"文字") 画多边形： polygon = QPolygon() polygon.setPoints(5,100,100,140,130,160,160,170,140,140,178 path.setFillRule(Qt.OddEvenFill) #奇偶填充规则 painter.drawPath(path) 下边是UI界面： 项目思路为： 点击对应按钮绘制特定图形
1.8K10编辑于 2023-03-10 - 来自专栏棒棒小飞人
html5 canvas绘制圆形进度实例
html5 canvas绘制圆形进度实例 <canvas id="test" width=200 height=200></canvas> <script> var canvas2d = document.getElementById .getContext("2d"); var deg = 0; var test = function(deg){ var r = deg*Math.PI/180; //canvas绘制圆形进度 canvas2d.lineWidth = 6; //线宽 canvas2d.arc(100,100,50,0-90*Math.PI/180,r-90*Math.PI/180,false); //canvas绘制弧形 //canvas2d.fill(); canvas2d.stroke(); //canvas2d.closePath(); }; //使用定时器让html5 canvas 绘制圆形进度动起来 var t = setInterval(function(){ deg+=10; test(deg); if(deg>360){ clearInterval
1.8K20发布于 2021-09-27 - 来自专栏大史住在大前端
【带着canvas去流浪（5）】绘制K线图
了解了上述基本知识，K线图的绘制和折线图其实并没有太大区别，按部就班去绘制就好了。 如果仔细观察Echarts官方提供的示例会发现图例中还有 MA5,MA10这样的图例标记，这里其实指的是N天的移动平均值Moving Average N，是减小数据波动性展示其宏观规律的常用方法之一，示例中的 MA5就是指依次将源数据中每5个点的值求平均值作为当前点的数据（至于5个点是从当前点开始算，还是从当前点结束都是可以的）。 if (data[i][0] >= data[i][1]) { context.fillRect(activeX - 5 , transCoord(data transCoord(data[i][1]) - transCoord(data[i][0])); } else{ context.fillRect(activeX - 5
1.4K00发布于 2019-04-18 - 来自专栏Python编程 pyqt matplotlib
PyQt5利用QPainter绘制各种图形
import sys from PyQt5.QtCore import * from PyQt5.QtGui import * from PyQt5.QtWidgets import * class StockDialog __init__(parent) self.setWindowTitle("利用QPainter绘制各种图形") mainSplitter = QSplitter label2=QLabel("画笔线宽：") label3=QLabel("画笔颜色：") label4=QLabel("画笔风格：") label5= self.brushStyleComboBox.addItem('Dense 4', Qt.Dense4Pattern) self.brushStyleComboBox.addItem('Dense 5' , Qt.Dense5Pattern) self.brushStyleComboBox.addItem('Dense 6', Qt.Dense6Pattern) self.brushStyleComboBox.addItem
1.8K30发布于 2019-08-14 - 来自专栏前端数据可视化
p5.js 矩形rect绘制教程
点赞 + 关注 + 收藏 = 学会了 用 p5.js 绘制矩形有个很方便的方法：react()。这个简单的函数能帮我们画出普通矩形、圆角矩形，甚至在 3D 模式下调整细节。 rect() 是 p5.js 里专门用来画矩形的函数。 1、四个角圆角相同（最简单） 如果想让四个角的圆角一样大，只需要在基础 4 个参数后加第 5 个参数（圆角半径）。 / 提前设置渲染模式，减少刷新延迟 frameRate(30); // 降低帧率到30（默认60，30更流畅不闪烁） } function draw() { // 关键：用不透明背景，每次绘制完全覆盖上一帧 ，不刺眼） stroke(`hsla(${hue}, 70%, 40%, 0.9)`); strokeWeight(1); // 边框变细，减少视觉干扰 // 绘制矩形
35610编辑于 2026-04-06 - 来自专栏Web前端知识点概要
使用HTML5+CSS3绘制HTML5的logo
一.了解HTML5 logo 的构造 1.对HTML5的logo进行分析： image.png 2.logo的实现步骤： 图1：定位出整个页面的背景区域“bg”,并实现背景光束。 图5：画出“5”的左半边。 图6：画出“5”的右半边。 图7：用色块遮盖多余的部分。 图8：在盾牌上方添加“HTML”图片。 二：代码实现 1.HTML代码部分： <! DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>HTML5 logo</title> <link href="css/logo.css rel="stylesheet"> </head> <body>
<div class="d_shield<em>5</em>"1.6K00发布于 2020-04-02来自专栏Dissecting UnrealUE5 CitySample的MassAI海量人群绘制
之前这篇有说过Mass的Visualization，在近处是真实可以交互的Actor，而在远处会统一合并成ISM，如下图所示。
2.5K60编辑于 2022-04-19来自专栏四月天的专栏PyQt5:QChart绘制折线图（1）
PyQt5:QChart绘制折线图 QChart下载 在之前的博客里边，pyqt5,pip下载已经介绍完全，这次单独下载Qt Charts。 Qt Charts绘制折线图 开发环境说明： 系统环境：Win10 IDE：Vs2017+Python3.6+Pyqt5.12 PyQt相关库调用。 from PyQt5.QtGui import * from PyQt5.QtWidgets import * from PyQt5.QtCore import * from PyQt5.QtChart import * 相关片段代码： 1>绘制折线一 self.series_1 = QLineSeries() #定义LineSerise，将类QLineSeries实例化 self._1_point 2.00,2.00) self._1_point_3 = QPointF(4.00,3.00) self._1_point_4 = QPointF(1.00,3.00) self._1_point_5
3.1K20编辑于 2023-03-10来自专栏hightopo纯Shading Language绘制HTML5时钟
今天是2014年的最后一天，这个时刻总会让人想起时钟，再过几个小时地球人都要再老了一岁，于是搞个HTML5版的时钟就是我们今天要完成的任务，实现HTML5的时钟绘制一般会采用三种方式，第一种采用CSS的实现方式 ，如HT for Web中《矢量手册》中自定义绘制的clock例子，HT的例子的实现效果如下，其实现代码附在本文的最后部分。 ，真正表盘的绘制逻辑完全在GPU对两个三角形进行Fragment Shading时实现。 4 : 1, 0, Math.PI * 2, true); g.closePath(); g.lineWidth = i % 5 === 0 ? theta = (hour - 3) * 2 * Math.PI / 12; g.rotate(theta); g.beginPath(); g.moveTo(-15, -5)
1.4K30发布于 2018-07-09来自专栏HT纯Shading Language绘制HTML5时钟
今天是2014年的最后一天，这个时刻总会让人想起时钟，再过几个小时地球人都要再老了一岁，于是搞个HTML5版的时钟就是我们今天要完成的任务，实现HTML5的时钟绘制一般会采用三种方式，第一种采用CSS的实现方式 ，如HT for Web中《矢量手册》中自定义绘制的clock例子，HT的例子的实现效果如下，其实现代码附在本文的最后部分。 ，真正表盘的绘制逻辑完全在GPU对两个三角形进行Fragment Shading时实现。 cx + Math.cos(theta) * r, cy + Math.sin(theta) * r, i % 5 1, 0, Math.PI * 2, true); g.closePath(); g.lineWidth = i % 5
1.6K70发布于 2018-01-03来自专栏hightopo绘制SVG内容到Canvas的HTML5应用
SVG与Canvas是HTML5上绘制图形应用的两种完全不同模式的技术，两种绘制图形方式各有优缺点，但两者并非水火不容，尤其是SVG内容可直接绘制在Canvas上的功能，使得两者可以完美的融合在一起，让 《基于HTML5的Drag and Drop生成图片Base64信息》这篇虽然展示的是拖拽普通栅格图片的效果，但你也可以直接拖拽SVG格式的图片进行显示，只不过普通图片的格式数据为data:image/ 以下一段小例子，展示了加载一个SVG图片后，分为七个基本进行缩放绘制的效果，可看出Canvas绘制SVG可保持其矢量不失真的特性 function draw(){ var img = new Image 64, height: 64, comps: [ { type: 'rect', rect: { func: function(data){ return [5, Canvas还有一种特殊的应用场景，就是将HTML元素通过SVG的foreignObject特性描述在SVG中，然后Canvas绘制SVG时，即可把foreignObject描述的HTML内容绘制到Canvas
2.5K30发布于 2018-07-09来自专栏HT绘制SVG内容到Canvas的HTML5应用
SVG与Canvas是HTML5上绘制图形应用的两种完全不同模式的技术，两种绘制图形方式各有优缺点，但两者并非水火不容，尤其是SVG内容可直接绘制在Canvas上的功能，使得两者可以完美的融合在一起，让 《基于HTML5的Drag and Drop生成图片Base64信息》这篇虽然展示的是拖拽普通栅格图片的效果，但你也可以直接拖拽SVG格式的图片进行显示，只不过普通图片的格式数据为data:image/ 以下一段小例子，展示了加载一个SVG图片后，分为七个基本进行缩放绘制的效果，可看出Canvas绘制SVG可保持其矢量不失真的特性 function draw(){ var img = new Image type: 'rect', rect: { func: function(data){ return [5, Canvas还有一种特殊的应用场景，就是将HTML元素通过SVG的foreignObject特性描述在SVG中，然后Canvas绘制SVG时，即可把foreignObject描述的HTML内容绘制到Canvas
6.6K80发布于 2018-01-03
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号