html5 canvas 画一个矩形,文字超出矩形怎样自动换行? 10C

DrawingManager.prototype.showLayerTitle = function (layer, isSelected) {
let x, y;
if (layer.p1) {

    x = layer.p1.x1 + layer.x + 5, y = layer.p1.y1 + layer.y + 5;
} else {
    x = layer.x + 5, y = layer.y + 5;
}

this.$canvas.drawText({
    name: layer.name + "_title",
    layer: true,
    cursors: {
        mouseover: 'hand'
    },
    fromCenter: false,
    fillStyle: '#9cf',
    strokeStyle: isSelected ? '#03e2dc' : '#d3e2dc',
    strokeWidth: 1,   //笔划宽度
    shadowColor: 'black',  //阴影颜色
    shadowBlur: 2,   //阴影模糊
    shadowOffsetX: 2,
    shadowOffsetY: 2,
    groups: ['grpTitle'],
    x: x, y: y,
    fontSize: isSelected ? 16 : 14,
    // fontFamily: 'Verdana, sans-serif',
    text: layer.data.title === '' ? '...':layer.data.title,
    click: () => {
        if(this.canvasDrawingModel === 0){
            saveCategory(layer.data.title, layer.name);
        }
    }
})

};
如何让text换行

0

2个回答

<canvas id="canvasId" width="400" height="350"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvasId");
var ctx = canvas.getContext("2d");
var str = "我爱你 I love you 你好你好你好你好你好你好你好";
var textWidth = 400;
var cx = 0;
var cy = 0;
ctx.font = "30px Arial";
ctx.lineWidth = 30;
ctx.textBaseline = "top";
while (str.length>0) {
    for (var i = 0; i < str.length; i++)
        if (ctx.measureText(str.substring(0,i+1)).width>textWidth)
            break;
    ctx.fillText(str.substring(0,i),cx,cy);
    str = str.substring(i);
    cy += ctx.lineWidth;
}
</script>

0
 var c=document.getElementById("canvas"); 
var ctx=c.getContext("2d"); 
ctx.fillStyle="#E992B9";
ctx.lineWidth=1; 
var str = "假如生活欺骗了你,请不要悲伤!thank you!"
var lineWidth = 0;
var canvasWidth = c.width;//计算canvas的宽度
var initHeight=15;//绘制字体距离canvas顶部初始的高度
var lastSubStrIndex= 0; //每次开始截取的字符串的索引
for(let i=0;i<str.length;i++){ 
    lineWidth+=ctx.measureText(str[i]).width; 
    if(lineWidth>canvasWidth){  
        ctx.fillText(str.substring(lastSubStrIndex,i),0,initHeight);//绘制截取部分
        initHeight+=20;//20为字体的高度
        lineWidth=0;
        lastSubStrIndex=i;
    } 
    if(i==str.length-1){//绘制剩余部分
        ctx.fillText(str.substring(lastSubStrIndex,i+1),0,initHeight);
    }
}

https://blog.csdn.net/lishihong108/article/details/52483867?ref=myread

-2
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
html5 canvas 画一个矩形,在矩形里添加文字。 文字超出矩形怎样自动换行???
[code=JScript]rnrn var canvas = document.getElementById("demo")rn var ctx = canvas.getContext('2d');rn ctx.font = "32pt Arial";rn ctx.beginPath();rn ctx.lineWidth = "1";rn ctx.strokeStyle = "blue";rn ctx.moveTo(100, 100);rn ctx.lineTo(100, 400);rn ctx.lineTo(400, 400);rn ctx.lineTo(400, 100);rn ctx.closePath();rn ctx.stroke();rn ctx.strokeText("hello world hello world hello world hello world hello world", 120, 200);rn ctx.strokeStyle = "red";rn ctx.stroke();rn[/code]rn无法换行啊!!!rn有什么方法可以换行???
html5 canvas 画一个矩形,在矩形里添加文字。 文字颜色与矩形背景颜色问题??
html5 canvas 画一个矩形,在矩形里添加文字。 文字颜色与矩形背景颜色问题。rn[code=JScript] rn var c=this.callout[0];rn var cxt=c.getContext("2d");rn cxt.beginPath();rn cxt.moveTo(x0,y0);rn cxt.lineTo(x1,y1);rn cxt.lineTo(x2,y2);rn cxt.lineTo(x3,y3);rn cxt.lineTo(x4,y4);rn cxt.closePath();rn cxt.fillStyle="#000000"; rn cxt.fillText("hello world", x,y);rn cxt.fill();rn cxt.stroke(); rn[/code]rn这样子只有背景色而文字颜色显示不了??rn怎样设置矩形背景色和文字颜色???rn
HTML5 canvas 绘制矩形 改变矩形颜色
HTML5 canvas 绘制矩形 改变矩形颜色
canvas画边框不一样的矩形
需求:用canvas画一个边框样式不一样的矩形简单粗暴,直接用canvas填充矩形,给canvas标签设置样式即可。&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html&amp;gt;&amp;lt;head&amp;gt; &amp;lt;title&amp;gt;canvas画边框不一样的长方形&amp;lt;/title&amp;gt; &amp;lt;style&amp;gt; .canvas { bord...
html5中canvas绘制矩形
canvas的例子(矩形)                                                  context是一个封装了很多绘图功能的对象,canvas元素绘制图像的时候有两种方法,                 context.fill()   //填充                 context.stroke()  //绘制边框   
HTML5 Canvas中绘制矩形
绘制矩形上一节,我们使用lineTo()方法绘制一个封闭的矩形。其实,canvas的API提供了rect()方法可以绘制矩形。rect()方法是路径方法,它会把指定的矩形添加到当前路径的子路径中。它只添加路径,绘制图形还是由stroke()或fill()方法完成。除了rect()方法之外,Canvas 的API还提供了三个直接处理矩形的方法:fillRect(x, y, width, height...
canvas画直线以及矩形
1.直线 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head lang=&quot;en&quot;&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;&amp;lt;/title&amp;gt; &amp;lt;style&amp;gt; *{ margin:0;
怎样画空心矩形?
rn画实心矩形我用下面的方法:rn1.在工具栏添加一个画实心矩形图标的图标,ID为ID_DRAW_FILLRECTrn2.在CxxxVIEW类中添加消息:rn ID_DRAW_FILLRECT COMMANDrn WN_LUBTTONDOWNrn WN_MOUSEMOVErn WM_LBUTTONUPrn3.添加数据成员rn bool m_bIsDraw //绘图标志rn int m_nDrawType //绘图类型rn CPoint m_cpStart //起点rn CPoint m_cpOld //终点rn4.在函数中添加代码:rn(1)rnCTimeView::CTimeView()rnrn // TODO: add construction code herern m_bIsDraw = false; //初始化绘图标志rn rnrn(2)rnvoid CTimeView::OnLButtonDown(UINT nFlags, CPoint point) rnrn // TODO: Add your message handler code here and/or call defaultrn if (m_bIsDraw) //判断是否正在绘图rn return;rn m_cpStart = point; //设置起邕点rn m_cpOld = point;rn m_bIsDraw = true; //判断绘图标志rn CView::OnLButtonDown(nFlags, point);rnrn rn(3)rnvoid CTimeView::OnMouseMove(UINT nFlags, CPoint point) rnrn // TODO: Add your message handler code here and/or call defaultrn if (!m_bIsDraw) //判断是否在绘图rn return;rn CClientDC dc(this); //取得客户区设备上下文rn dc.SetROP2(R2_NOT); //设置绘图色为屏幕反转色rn CRect rectOld(m_cpStart, m_cpOld); //记录原矩形rn CRect rectNew(m_cpStart, point); //记录新矩形rn switch (m_nDrawType) //选择绘图类型rn rn case 0:rn dc.Rectangle(rectOld); //擦除原有矩形rn dc.Rectangle(rectNew); //画新的矩形rn break;rn rn m_cpOld = point; //修改鼠标位置rn CView::OnMouseMove(nFlags, point);rnrnrn(4)rnvoid CTimeView::OnLButtonUp(UINT nFlags, CPoint point) rnrn // TODO: Add your message handler code here and/or call defaultrn if (m_bIsDraw) //判断是否在绘图中rn m_bIsDraw = false;rn CView::OnLButtonUp(nFlags, point);rnrnrn(5)rnvoid CTimeView::OnDrawFillrect() //获取绘图类型rnrn // TODO: Add your command handler code herern m_nDrawType = 0; rnrnrn上面是画实心矩形的方法,那画空心矩形又是怎么样的呢?
怎样画流动矩形?
我想画一个PS_DOT(点)风格矩形,并且让这个矩形上的点看起来有流动效果;rn就相photoshop选种图象的那样?能不 能给我点意见.我 会画矩形,但不 知要它流动怎么办.
canvas画一个简单的红色矩形
来自我的网站:canvas画一个简单的红色矩形
Canvas 画一个指定大小的渐变矩形
demo.html:&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;Title&amp;lt;/title&amp;gt; &amp;lt;/head&amp;gt; &amp;lt;body&amp;gt; &am
[Cocoa]_[画直线、矩形、文字]
总结Cocoa下画直线、矩形、文字的方法,在界面开发种经常会遇到。 1.画直线,有两种方法。 (1)把直线看成是一个高度较小的的矩形 //(1)直线的本质是一个高度较小的矩形 NSRect rect5 = NSMakeRect(50, 70, 350, 5); NSBezierPath *path1 = [NSBezierPath bezierPathWithRect
OpenGLES---画一个矩形
RectShader   RectWin  窗口 -- RectShader #include #include typedef int uniform; typedef int attribute; typedef int location; class ShaderId { public: ShaderId(){id=-1;}; publi
如何画一个矩形???
我要画一个矩形,但画矩形的函数rnRectangle(...)默认是填充方式的,我不需要填充,现在我是使用一个rnPolyline( , )函数,将一个矩形的四个点顺序写在一个POINT数组中,这样总觉得代码太长,有没有什么别的好一点的办法?BRUSH有没有效果为不填充的?rn
lisp 画一个矩形
(defun c:tt () (setq p1 (getpoint "第一点:")) (setq p2 (getpoint p1 "\n**第二点:")) (setq w (getdist "\n输入宽度:")) (setq h (getdist "\n输入长度:")) (setq ang (angle p1 p2) l (distance p1 p2) ) (...
画一个旋转矩形
画一个旋转矩形能通过多拽调整大小,位置,还有旋转角度rnrn对于不旋转的矩形很好做,但是旋转矩形,我做了一个星期感觉还是有我问题。大家有没有什么好的方案,就像CAD画矩形功能差不多
在容器中画一个矩形
在一个panel里面画一个矩形rn rnrn要鼠标点击下去以后 移动鼠标的时候开始画 松开鼠标画矩形结束 rn开始画了以后 鼠标移动到哪里 矩形的形状要跟真变
GDI得TextRenderer.DrawText 方法画的文字超出指定矩形的边界
string strTest="hgdfghalkfjdsfopsdajjfdoipfewjoifjlksadfdsasadsad rnfjsdakfjdsafdsadsadsads rn]fdsa rnfsd rnaf rnsd rnfsad rnf rnsdf rndsafsadjfwoeifuwiopeureipworupewoiurpoweurpoweujfpoajfpoiweoiwejrwr"; rnPen blackPen = new Pen(Color.Black, 3); rn画出来的文字超出的指定矩形的范围 rn//画矩形 rne.Graphics.DrawRectangle(blackPen, new Rectangle(10, 10, 71, 205)); rn//画文字 rnTextFormatFlags flags =TextFormatFlags.Left ¦ TextFormatFlags.Bottom ¦ TextFormatFlags.WordBreak; rn TextRenderer.DrawText(e.Graphics, strTest, this.Font, rn new Rectangle(10, 10, 71, 205), SystemColors.ControlText, flags);
HTML5中的canvas绘制三个矩形
&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt;     &amp;lt;head&amp;gt;         &amp;lt;meta charset=&quot;utf-8&quot; /&amp;gt;         &amp;lt;title&amp;gt;绘制三个矩形&amp;lt;/title&amp;gt;         &amp;lt;style&amp;gt;             body{                 w
HTML5中使用canvas绘制矩形
canvas是HTML5中新增的一个元素,使用Canvas可以绘制任何你喜欢的图形。先来认识什么是Canvas? 1.在页面上放置一个canvas元素,就相当于在页面上放置了一块“画布”,可以在其中进行图像描绘。 2. canvas 通过 JavaScript 来绘制 2D 图形,它是逐像素进行渲染的。 3.在 canvas 中,一旦图形被绘制完成,它就不会继续得到浏览器的关注。如果其位置发
html5笔记3 — canvas绘画矩形、圆
canvas是html5中新增加的一个元素,专门用来绘制图形。1. 创建画布<script src="canvas.js"></script>引入canvas.js文件<body onload="draw('canvas');"> <canvas id="canvas" width="500" height="350"></canvas> </body>意思是: 先引入canvas.js脚
在c#里面怎样动态的画一个矩形???????????
在c#里面怎样动态的画一个矩形???????????
easy 问题求解----------怎样画一个彩色的矩形???
我用rn CDC* pDC=GetDC();rn CRect rect;rn CBrush brush;rn brush.CreateSolidBrush(RGB(255, 0, 0));rn pDC->SelectObject(&brush);rn。。。。。 rn pDC->MoveTo(。。。 );rn pDC->LineTo( 。。。);rn做的矩形,为什么没法画出来的总是黑色的?
HTML5中canvas画图之画矩形和矩形掏空
rect方法用于绘制矩形(长方形)。其语法如下: context.rect(x,y,高度,宽度); 绘制代码如下: 绘制矩形 var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d"); //绘制 ctx.fillStyle="#ff00000"; ct
HTML5中canvas实现矩形颜色渐变
声明必须是 HTML 文档的第一行,位于 标签之前。--> HTML5 //这个函数将在页面完全加载后调用 window.onload = function() { draw(); }; function draw(grad) { var canvas = document.getElementById('c1'); if (!canvas||! canvas.getCon
HTML5 Canvas矩形统计图走势图.zip
HTML5 Canvas矩形统计图走势图基于Canvas jquery-1.7.1.min.js制作,绿色统计图,代码附带详细中文注释,方便使用。
html5 canvsast元素绘制直线
canvas{background: #b8edc9;}                            Canvas                      您的浏览器不支持html5dcanvas元素                       var canvas=document.getElementById('mycanvas');//定义变量获取画布dom
HTML5新增标签--canvas之绘制矩形
&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt;     &amp;lt;head&amp;gt;         &amp;lt;meta charset=&quot;utf-8&quot; /&amp;gt;         &amp;lt;title&amp;gt;&amp;lt;/title&amp;gt;         &amp;lt;style&amp;gt;             body{                 width:
Mablab中在一个矩形中再画一个矩形,并将再画的这个矩形挖空
如题,请各位帮帮忙,在线等待
Canvas矩形封装
var cvs = document.getElementById('cvs'); var ctx = cvs.getContext('2d'); // 对象矩形封装 // 构造函数 function JuXing(ctx,startX,startY,width,height,lineWidth,strokeStyle,fillStyle){ ...
渐变和canvas渐变矩形
在canvas中实现渐变有2种方式 第一种:通过遍历点的值实现 第二种:创建渐变的方案——createLinearGradient 第一种: &amp;lt;canvas width=&quot;600&quot; height=&quot;400&quot;&amp;gt;&amp;lt;/canvas&amp;gt; var myCanvas = document.querySelector('canvas'); var ctx = myCa...
canvas绘制渐变的矩形
效果展示: 代码部分: &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;渐变矩形&lt;/title&gt; &lt;style&gt; canvas { border: 1px dashed red; } &lt;/st...
canvas绘制矩形
如果后绘制的图形与前绘制的图形有重叠,则后绘制的图形会覆盖前绘制的图形 绘制矩形方法: context.rect(x,y,width,height);// 指定矩形路径,后面还需要stroke()或fill()来绘制 context.fillRect(x,y,width,height);// 直接根据指定的路径来填充矩形 context.strokeRect(x,y,width,heigh...
canvas 鼠标移动矩形
主要实现功能是自己实现了在canvas下创建一个矩形,鼠标选中矩形框时可以拖动(矩形会变色,而且做了一点边界处理,还需要优化)。 这里对于事件的监听和解除监听我选择了用addEventListener(),removeEventListener 。 例如:addEventListener("mousemove",moveHandler);            removeEve
canvas基础--矩形
上回我们了解了线条,由线→面,今天我们来说**矩形** 画矩形之前呢,我们先思考如何才能画一个矩形?很简单,就是四条线段凑到一起,围成一个面,那么我们在写的时候是不是真的要画四条直线呢?当然不要---确定初始位置,改变终点位置,三次就好。 备注:一下我们画图形,都是按照顺时针画的哟。 还是按照我们之前学画直线的方法: 获取元素myCanvas 调用方法:getContext(&quot;2
使用Canvas绘制矩形
其中的html中的代码为: &amp;lt;canvas id=&quot;drawing&quot; width=&quot;200&quot; height=&quot;200&quot;&amp;gt;&amp;lt;!--定义画布--&amp;gt; 方法1:fillRect()方法在画布上绘制矩形 /!*使用fillRect()方法在画布上绘制矩形*!/ var drawing=document.getElementById(&quot;drawing&quot;); // /!*确
Canvas绘制矩形
Canvas绘制矩形 context.rect ( x ,y ,width ,height ) //规划了矩形的路径 context.fillRect ( x ,y ,width ,height ) //根据fillStyle绘制出一个填充的矩形 context.strokeRect ( x ,y ,width ,height ) 根据strokeStyle绘制出一个矩形的边框 conte
canvas 和 js实现矩形
CANVAS实现多个矩形, &lt;canvas id="circle" width="500" height="500" style="border:1px solid black;"&gt;&lt;/canvas&gt; function randomRect() { var c = document.getElementById('circle'); va...
VC画虚线矩形,点画线矩形
VC画虚线矩形,实线矩形和点画线矩形的小demo!
h5 Canvas矩形的绘制
h5 Canvas矩形的绘制 1.绘制矩形api 在Canvas中提供了绘制矩形的API: fillRect(x, y, width, height):绘制一个填充的矩形 strokeRect(x, y, width, height):绘制一个矩形的边框 clearRect(x, y, width, height):清除指定矩形区域,让清除部分完全透明 除此之外还可以通过Canvas中Canv...
相关热词 c#异步发送kafka c#窗体编号 c# 操作二进制文件 c# 反射 机制 c#线程 窗体失去响应 c#角度转弧度 c# 解析gps数据 c# vs设置 语法版本 c# json含回车 c#多线程demo