请问canvas在React里面无法画图是为什么?

写了方法函数,但是没有效果,请问可能是什么原因?图片说明

4个回答

react呀,写了一个,看看有没有借鉴意义
 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
</canvas>
<div id="example"></div>
<script type="text/babel">
class TestCanvas extends React.Component {
  constructor(props) {
    super(props);
  }
  componentDidMount() {
    this.draw();
  }
  draw(){
      var c=document.getElementById("myCanvas");
      var ctx=c.getContext("2d");
      ctx.clearRect(45,45,60,60);
      ctx.strokeRect(50,50,50,50);
    }
  render() {
    return (
      <div>
        <h1>Hello, Canvas!</h1>
      </div>
    );
  }
}

ReactDOM.render(
  <TestCanvas />,
  document.getElementById('example')
);

</script>

</body>
</html>
Eternity_twinkle
Eternity_twinkle 我在回答里面放了结构图。。能不能帮我看一下是为什么没有效果?
12 个月之前 回复
Eternity_twinkle
Eternity_twinkle 麻烦能不能其他方式帮我看一下,才接触js跟React一个月。。。。完全找不到问题重点在哪
12 个月之前 回复
Eternity_twinkle
Eternity_twinkle 评论不能放图。。。跟你写的差不多,但是就是没有效果,实在找不到问题出在哪里
12 个月之前 回复
Eternity_twinkle
Eternity_twinkle 最后加上这种export default myConnect(state => ({}))(TradingCenter)
12 个月之前 回复
Eternity_twinkle
Eternity_twinkle 为什么你们都是这样写的。。。我是直接写在return里面的
12 个月之前 回复
 上面只是定义一个方法,需要调用方法
 draw();
Eternity_twinkle
Eternity_twinkle 有画布就是画不上去,搞不清楚问题出在哪里,方法已经运行了,但是就是不知道为什么没有效果,都快要抓狂了
12 个月之前 回复
Eternity_twinkle
Eternity_twinkle 我调用了,渲染之后调用的:componentDidMount() {this.draw()},但是还是没效果
12 个月之前 回复

结构大概是这样的,但是没有效果,请问能知道原因吗?图片说明

是因为画的图形画早了,画完之后才去获取画布的,已经解决

qq_33312007
qq_33312007 怎么解决的 大兄得 代码贴出来 遇到同样问题 必须殿下刷新才出来我的是
5 个月之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
为什么canvas无法刷新?
我想用Image1->Canvas->Refresh();来把Image1上画的线条全部清空。可就是不行,为什么?另外Canvas->Pen->Mode = pmNotXor;是怎么用的?
请问WPF,canvas画图的问题
我有 1000个顶点, 每个顶点之间都有连线rn请问在canvas中用什么画这些顶点的连线比较好?rn目前我只是知道这个方法,rn但是貌似不适合画 Binomial[1000, 2] = 499500 这么多线rn[code=csharp] private void SetupGraphonCanvas()rn rn // Graph graph = new Graph(path);rn this.CanvasForGraph.Background= new SolidColorBrush(Colors.LightBlue);rn Line line = new Line();rn line.Stroke = Brushes.Aqua;rnrn line.X1 = 1;rn line.X2 = 50;rn line.Y1 = 1;rn line.Y2 = 50;rnrn line.StrokeThickness = 2;rn this.CanvasForGraph.Children.Add(line);rn [/code]rn
canvas画图
本文件中代码为js,提供canvas中画圆圈、实心圈、直线的方法实例
请问Canvas作为方法参数怎么画图呢?
public void doCanvas(Canvas _Canvas)rn rn 这边怎样用 paint(Graphics g)rn rn
请问在handleMessage里能不能使用Canvas画图
设计想法:在接收到主机发来的数据后,交给handler,handler根据消息不同画图。但是貌似根本画不出来,不知道哪位知道原因? private Handler myHandler = new Handler()         {                 // 2.重写消息处理函数                 public void handleMessage(Messag
html5 canvas 画图
html5 canvas 画图
用Canvas画图的小问题:
1:用什么控件可以放一个比较大的用Canvas画的图,就是控件的大小比图小,显示不了整个图。用什么控件可以有拖动条,拖动来显示呢?控件的属性要怎么设置?rn2:怎么可以用过程调用画图,我只是用button的onclick事件来画?
canvas画图采坑
1)首先canvas的原点在画布的左上角上,有时候为了方便需要将原点平移,使用ctx.translate(x, y)函数;后面的坐标定位都是以这个点为基准2)矩形,图像的距离原点的坐标以它们的左上角为起点3)描边和填充是两个不同的概念,描边使用strokeStyle属性,调用stroke来实现;填充使用fillStyle,调用fillRect()填充矩形,fillText()填充文字,fill()...
Canvas与Bitmap画图的问题
这是自定义的一个View.做为涂鸦用的,两个问题,1.怎么把mBitmap放到画板中间,并且整个画板都可以执行画的操作,因为目前来说R.drawable.bg在左上角并且只能在图片上做画的操作,空白处不能。2.另一个是怎么作清除画板上的已经画的东西和撤销功能。知道的请说下,成分感谢rn代码如下:rnpublic class CanvasView extends View rnrn private Bitmap mBitmap;rn private Canvas mCanvas;rn private Path mPath;rn private Paint mBitmapPaint;rn private Paint mPaint;rnrn public CanvasView(Context c) rn super(c);rn mPaint = new Paint();rnrn mBitmap = BitmapFactory.decodeResource(getResources(),rn R.drawable.bg).copy(Bitmap.Config.ARGB_8888, true);rn // mBitmap = Bitmap.createBitmap(300, 400, Bitmap.Config.ARGB_8888);rn // mBitmap = Bitmap.createBitmap(mBitmap);rn //Bitmap b = BitmapFactory.decodeResource(getResources(), R.drawable.bg);rn mBitmap = Bitmap.createBitmap(mBitmap , 0, 0, 300, 400);rnrn mCanvas = new Canvas(mBitmap);rn mPath = new Path();rn mBitmapPaint = new Paint(Paint.DITHER_FLAG);rnrn mPaint.setAntiAlias(true);rn mPaint.setDither(true);rn mPaint.setColor(0xff000000);rn mPaint.setStyle(Paint.Style.STROKE);rn mPaint.setStrokeJoin(Paint.Join.ROUND);rn mPaint.setStrokeCap(Paint.Cap.ROUND);rn mPaint.setStrokeWidth(5);rn rnrn @Overridern protected void onSizeChanged(int w, int h, int oldw, int oldh) rn super.onSizeChanged(w, h, oldw, oldh);rn rnrn @Overridern protected void onDraw(Canvas canvas) rn canvas.drawColor(0xFFFFFFFF);// set background colorrnrn canvas.drawBitmap(mBitmap, 0, 0, mBitmapPaint);rnrn canvas.drawPath(mPath, mPaint);rn rn}
在canvas上画图的问题
我在paintbox的canvas上画图(如用 lineto等方法)rn画完后 如果有别的 控件或窗体(如dialogform) 出现在这上面的话 rn原来画出来的东西就会被擦去rnrn怎么能不让它擦去呢?
html5 canvas画图实践
一、因项目需求,在手机web中动态生成一张如下图片: 顶部背景图固定,圆圈内的logo按不同店铺logo进行加载 店铺名动态获取并居中显示 店铺简介动态获取并居中显示,最多显示三行,超出字符用省略号代替 动态获取固定大小二维码图片,生成二维码直角围栏 二、html结构如下:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8
H5 canvas制作画图
1 概述    随着前端技术的发展,canvas使用的越累越多,而且越来越多的H5技术被应用到实际开发中,尤其是js插件更是无处不用,今天主要是分享一下如何去使用canvas在H5界面中制一个超级简单的画图工具。 2 效果图如下: 3 主要功能 支持选择画笔的颜色 支持选择画笔的线条粗细
canvas画图集合
DOCTYPE html> html lang="en"> head> title>渐变图形title> meta charset="UTF-8"> meta name="viewport" content="width=device-width, initial-scale=1"> head> body onload="draw8()"> p>绘制渐变图形p>
canvas画图Demo
适用canvas画布进行自定义绘图,paint画笔进行定义画图所需的画笔,包括画线、画点、画多边形、以及矩阵等的demo
简单聊聊CANVAS画图
CANVAS画图的基本操作非常简单,就是填充和描边,填充是fill,描边是stoke,其实很好理解,我们正常在纸上画图,也无非就是描个边填个色。 画图之前先要得到2D上下文,用getContext("2d")方法,要想用3D上下文就传3D,不过目前好像还没有实现3D上下文。 balabala var drawing=document.getElementById("drawing"); v
用Canvas画图问题
我在模拟器上测试可以调用画图方法,但是在真机上测试能安装,不能打开,这是怎么一回事啊,去掉imgage后,在真机上能运行,郁闷。。。
关于Canvas画图的问题
请问我在Form上面输出了些点 和直线 用按钮点击绘制的 但是窗口变动就会消失 rnrn我不能画在OnPaint里面 请问有什么办法 好像可以用重绘 和加载到image控件里面地方法把 请问到底怎么重绘啊 或者加载到image里面 rnrn谁能给我个具体的例子看看 啊 谢谢
关于Canvas画图的
应课程需要,我想画cos函数,用cb的Paintbox->Canvas实现rn我曾在vb下实现过类似的功能,但cb老是画不好正选函数,大活帮啊rnrnrn画cos函数,我的代码如下:rnrnconst float PI=3.1415; rnint A=20; //振幅 rnrnPaintBox的ONPaint事件中rnrnconst float PI=3.1415;rnint A=150; //振幅rnint Y;rn//画x轴rnPaintBox1->Canvas->MoveTo(0,PaintBox1->ClientHeight/2);rnPaintBox1->Canvas->LineTo(PaintBox1->ClientWidth,PaintBox1->ClientHeight/2);rn//图象的第一点rnY=PaintBox1->ClientHeight/2-A*(int)cos(PI*0);rnPaintBox1->Canvas->MoveTo(0,Y);rnfor(int i=1;iClientWidth;i++)rnrn Y=PaintBox1->ClientHeight/2-A*(int)cos(PI/50*i);rn PaintBox1->Canvas->LineTo(i,Y);rn PaintBox1->Canvas->MoveTo(i,Y);rnrn大家帮帮啊
canvas画图测试
NULL 博文链接:https://frosh.iteye.com/blog/1719420
canvas画图模糊问题
使用canvas画图时,会遇到图片模糊的问题。 1.可以使用hidpi-canvas-polyfill; 举个栗子var getPixelRatio = function(context) { var backingStore = context.backingStorePixelRatio || context.webkitBackingStorePixelRatio ||
canvas画图小程序
之前学习h5和css3大部分时间都是看书,看完了没啥感觉,最近在联系各种demo,感觉虽然敲代码会让你觉得学得慢,但是学的劳呀,而且做出了想要的demo那成就感真实棒棒哒! 下面就是我学习canvas写的画图小程序demo参考了航哥学习h5和css3可以好好跟着他练习<!DOCTYPE> <html> <head> <title>canvas画图小程序</title>
canvas画图小例子
&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;title&amp;gt;h5构建基本的画图程序&amp;lt;/title&amp;gt; &amp;lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&amp;gt; &amp;lt;meta http-equiv=&q
请教:canvas的画图问题
能否用一个stroke()函数,画出两种颜色的直线?貌似stroke函数只对最后一个strokeStyle设置的颜色起作用?多谢各位了
在线画图canvas
canvas和html5+js的在线画图
【萌芽笔记】Canvas画图
萌芽之前一直都觉得Canvas是个神奇的东西所以今天学习一下!来来一起玩儿点好玩的,用Canvas画一个贼鸡儿丑的 五角星!长期更新!!! canvas画布 首先让我们创建一个canvas画布 &lt;canvas id="myCanvas" height="500px" width="500px" style="border:1px solid #d3d3d3;"&gt;您的浏览器不支持&lt...
SWT Canvas 画图的问题
现在用SWT做一个小的程序,有一个功能,是加载一张地图,完后在地图上鼠标左键点击的时候,在点击的地方画圆(可以在地图任意位置,画多个圆圈),我首先用canvas.setBackground(***)把地图设为了canvas的背景,完后监听mouselistener来画圆,这都没什么问题,但现在问题是,如果用鼠标右键点击我画的某个圆圈,要求这个圆圈消失,这个该怎么实现,我现在的做法是画圆圈都用gc的drawOval方法,画的时候指定为黑色,取消的时候我再重新画个圆圈上去,画的时候指定为白色,但明显取消后那里就有个白色圆圈,但我想实现取消的时候,恢复以前地图的颜色,怎么实现
HTML5 canvas画图
最近要做一个像系统附件中画图一样的功能,用HTML5 中canvas来做,网上搜的大多数是画柱状图、饼状图等的插件。问一下做过类似功能的前辈,有没有什么好的JS插件?jcanvas好用吗?
android canvas 画图
[code=java]package com.example.myview;rnrnimport android.content.Context;rnimport android.graphics.Canvas;rnimport android.graphics.Color;rnimport android.graphics.Paint;rnimport android.util.Log;rnimport android.view.MotionEvent;rnimport android.view.View;rnrnpublic class DrawView extends View rn private int x_begin;rn private int y_begin;rn private int x_end;rn private int y_end;rn private Canvas can = null;rn rn rn public DrawView(Context context)rn rn super(context);rn invalidate();rn rn rn rn rn public void onDraw(Canvas canvas)rn rn super.onDraw(canvas);rn can = canvas;rn rn rn rn// canvas.drawCircle(x, y, 15, p);rn // canvas.drawLine(x_begin, y_begin, x_end, y_end, p);rn rn rn public boolean onTouchEvent(MotionEvent event)rn rn rn if(event.getAction()==MotionEvent.ACTION_DOWN)rn rn x_begin = (int) event.getX();rn y_begin = (int) event.getY(); rn rn rn if(event.getAction() == MotionEvent.ACTION_MOVE)rn rn x_end = (int)event.getX();rn y_end = (int)event.getY();rn Paint p = new Paint();rn p.setColor(Color.RED);rn rn can.drawLine(x_begin, y_begin, x_end, y_end, p);rn rn rn rn rnrn rn return true;rn rnrn[/code]rn这是一个画图的程序 但画不出来 can也不是空的 分不多了 还请各位大哥看看帮帮忙 谢谢了
canvas画图(web作业)
通过canvas画图 HTML代码 效果图 &amp;amp;lt;html&amp;amp;gt; &amp;amp;lt;head&amp;amp;gt; &amp;amp;lt;script type=&amp;quot;application/javascript&amp;quot;&amp;amp;gt; function draw() { var canvas = document.getElementById('canvas'); if (canv
关于canvas画图
canvas画图:用鼠标—画曲线,直线,矩形,圆http://blog.csdn.net/qq_31164127/article/details/72929871 html5 canvas自定义绘制多边图形代码 http://www.17sucai.com/pins/19365.html Canvas 中如何获取自定义图形的边界坐标集合 https://segmentfault.com/q/101...
IE9下,Canvas画图的问题
问题:在所有的浏览器中,画图的时候,连线均正常,就是在IE9下,不显示线条。如下图所示:rnIE9下:[img=http://img.my.csdn.net/uploads/201212/03/1354514176_2555.jpg][/img]rn其他浏览器中:[img=http://img.my.csdn.net/uploads/201212/03/1354514278_8074.png][/img]rn关键代码段:[code=javascript]generateElement : function()rn rn if(document.all)rn rn var element = document.createElement("v:line");rn element.style.position = 'absolute'; rn element.strokecolor="black";rn element.strokeweight="1px";rn element.innerHTML="";rn element.style.zIndex = 10;rn rn return element;rn rn rn var element = document.createElement("div");rn element.style.position = 'absolute';rn element.style.fontSize = "1px";rn element.style.zIndex = 10;rn element.className = "svg-line";rn rn return element;rn [/code]rn请问诸位大神,在[code=javascript]if (document.all) [/code]这段代码中,IE9下的line对象,该怎么写呢?
Android下使用Canvas画图
Android下使用Canvas画图,详细参见博客:http://www.cnblogs.com/plokmju/p/android_Canvas.html
Canvas画图设置渐变色
1、线形图设置填充色为渐变色方法: /** * Draws the provided path in filled mode with the provided drawable. * * @param c * @param filledPath * @param drawable */ protected void drawFilledPath(Canvas c, Path fil
js canvas 画图线程处理
js canvas 画图线程处理 /** *这里写成成员方法的样子,根据需要修改即可 * 预加载画图,因为canvas画图是异步的 * @param url * @param callback */ preImage:function(url,callback){ var img = new Image(); //创建一个Image
canvas --画图、图片
画图: script> var canvas = document.querySelector("#canvas"); canvas.width = 600; canvas.height = 600; var pen = canvas.getContext('2d'); // pen.strokeRect(10,10,200,50); // //保存(这一次画布的信息)
JAVA中用CANVAS画图
以下是我的代码,请各位帮忙调试!谢谢啦!我的想用CANVAS画一条直线!接受输入数据,然后画线! rnimport java.awt.*; rnimport java.awt.event.*; rnrnpublic class PaintLine rnrnpublic static void main(String [] args) rn rnint x1=0,y1=0,x2=0,y2=0; rnCanvasD cd=new CanvasD(x1,y1, x2, y2); rnnew FrameInOut(cd ); rn rn rnrnclass FrameInOut extends Frame implements MouseListener rn rnLabel prompt1,prompt2; rnTextField t1,t2; rnButton btn1; rnpublic FrameInOut(CanvasD cd) rn rnsuper("画直线"); rnprompt1=new Label("请输入x2:"); rnprompt2=new Label("y2:"); rnt1=new TextField(10); rnt2=new TextField(10); rnbtn1=new Button("画线"); rnint x1=0,y1=0,x2=100,y2=100; rnCanvasD cd1=new CanvasD(x1,y1, x2, y2); rnrnsetLayout(new FlowLayout()); rnadd(prompt1); rnadd(t1); rnadd(prompt2); rnadd(t2); rnadd(btn1); rnadd(cd); rnbtn1.addMouseListener(this); rnaddWindowListener(new HandleWin()); rnsetSize(500,500); rnsetVisible(true); rn rnpublic void mouseClicked(MouseEvent e) rn rnif(e.getSource()==btn1) rn rnrnrnx2=Integer.parseInt(t1.getText()); rny2=Integer.parseInt(t2.getText()); rn rn rnrnpublic void mouseEntered(MouseEvent e) rn// TODO Auto-generated method stub rn rnpublic void mouseExited(MouseEvent e) rn// TODO Auto-generated method stub rn rnpublic void mousePressed(MouseEvent e) rn// TODO Auto-generated method stub rn rnpublic void mouseReleased(MouseEvent e) rn// TODO Auto-generated method stub rn rnrnrn rnclass CanvasD extends Canvas rn rnstatic int a1,b1,a2,b2; rnstatic rn rna1=0; rna2=0; rnb1=0; rnb2=0; rn rnstatic int x1,y1,x2,y2; rnCanvasD(int a1,int b1,int a2,int b2) rn rnx1=a1; rny1=b1; rnx2=a2; rny2=b2; rnsetBackground(Color.gray); rn setSize(300,300); rnrn rnrnpublic void paint(Graphics g) rn rng.drawLine(x1,y1,x2,y2); rnrepaint(); rn rnrnsetSize(300,300); rn rnrn rnrn rnrnrnclass HandleWin extends WindowAdapter rn rnpublic void windowClosing(WindowEvent e) rn rn(e.getWindow()).dispose(); rnSystem.exit(0); rn rn rn
FLEX canvas 画图 事件
要求:在一个canvas上画一条直线,画线完毕后把画线结果共享给服务。rn如何监听Canvas上的操作、画线的结果以及共享给服务时传递一个什么样的值
玩转html5 的 canvas画图
玩转html5 的 canvas画图, canvas入门,简单介绍canvas。
Sl画图 为什么是透明的?
如图,一个Canvas,背景白色,里面先画了一个坐标系,然后在上面画了一个矩形Rectangle,Rectangle.Fill = new SolidColorBrush(Colors.White);画出来之后,应该是把地下的坐标系给遮住的,怎么会是透明的?
[Canvas画图系列]Canvas基本概念_01
一 开始之前虽然大家都称Canvas为html5的新标签,看起来好像Canvas属于html语言的新知识,但其实Canvas画图是通过javascript来做的。所以,如果你想学习Canvas画图,你必须要有Javascript基础。另外,画图嘛,总有一些图像方面的术语和知识点,所以如果你有过做图或美工经验,学习Canvas会更容易。Canvas,意为画布也。而Html5中的Canvas也真的跟现实
相关热词 c# 标准差 计算 c#siki第五季 c#入门推荐书 c# 解码海康数据流 c# xml的遍历循环 c# 取 查看源码没有的 c#解决高并发 委托 c#日期转化为字符串 c# 显示问号 c# 字典对象池