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

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

0

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

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

0

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

0
qq_33312007
qq_33312007 怎么解决的 大兄得 代码贴出来 遇到同样问题 必须殿下刷新才出来我的是
4 个月之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
基于Canvas和React极简游戏(一)
游戏设计思路游戏引擎:游戏循环,游戏原型 我把这个 miniGame的实现看作是业务逻辑的实现。 因为我希望我的react组件可以复用,而不是嵌入太多业务逻辑的代码。 所以import 这个miniGame中的某几个函数给我用就行了。定义精灵行为精灵行为 重力gravity行为, 二次弹跳, 上抛的行为。 底部矩形:矩形的主颜色作为 精灵的属性,这个属性是一个数组,当精灵与这个数组包
react 中 使用canvas 实现圆角圆环
echarts 暂时不支持圆角的圆环 下面是封装的组件源码: import React, { Component } from 'react'; export class CanvasDemo extends React.Component { constructor(props) { super(props) this.initCanvas = this.initC...
HTML5 Canvas 开发 绘图方法整理 【十四、将 Canvas画布 作为图片保存并下载】
将Canvas 绘制出来的东西作为图片保存起来,主要使用的是 toDataURL(type) ; type 是可选参数,如果省略 将使用png格式 来保存图片 MIME类型主要是设定图片被保存的类型, 当该扩展名被访问时,浏览器会自动使用指定应用程序打开。 &amp;amp;lt;script&amp;amp;gt; let cans=document.getElementById(&amp;quot;m...
canvas学习之路(一)基础绘图功能解析
canvas的一些基础画图功能还是比较容易懂的,只是有些功能初次接触的话比较难以理解,需要自己仔细琢磨。我把这些功能以及自己学习过程遇到的问题写下来希望能帮到大家。(一)canvas介绍canvas是H5的的新功能,本身没有画图的功能,相当于一块画板,所有的绘图工作在画板上完成。画图的工作在js内部完成。 画板的建立 这里要注意的是canvas画板建立在body中,其宽高一定要写在元素内部。其属
canvas把图片绘制上画布
1.创建图片 var image=new Image(); 2.要复制的图片路径 image.src="img/ss.jpg"; 3.图片加载完成绘制画布上 image.onload=function(){ convertImageToCanvas(image) function convertImageToCanvas(image) { var canvas =
canvas 画图片没有显示
h5新添加了一个元素叫做canvas画布,可以用它画出很多的图形。其中提供了一个方法 drawImage 方法的说明可以看canvas手册 我按照上面写了一个demo<body> <img src="furit.png" id="fruit"> <canvas id="canvas" width="400" hegiht="400"></canvas> </body>var fr
canvas生成图片所遇到的坑
相信很多童鞋都在运用canvas 生成图片过程中遇到了很多问题。因此分享个人在生成过程中遇到的问题。 1.首先:上一张最终生成的效果图 2.分析下该页面的元素 1)用户头像 2)姓名 3)logo语(图片) 4)二维码 5)logo语(图片) 6)用户提示语 3. 具体的生成方法描述 运用canvas的相应api 分别绘制 圆形图片 矩形圆角画布 文字等等 通过can
使用canvas生成图片验证码
效果图: 点击图片也会刷新图片 代码:index.js import React, { Component } from 'react' import styles from './index.less'; class First extends Component { constructor(props) { super(props) this.state = { code: ...
如何解决Android Canvas画图,不能动态展示在界面上的问题
最近用Canvas画图,发现画图的过程不能实时显示在ImageView上,虽然尝试了以下三种方法,仍然不行按照google的一些建议添加了setWillNotDraw(false); 也不行把画图过程写在onDraw里面,每隔一段时间imageView.invalidate(), 也不行。发现onDraw没有被调用的到。后来又更改代码使得onDraw隔一段时间被调用一次,但是每次onDraw调用,...
使用canvas画图,图形模糊怎么办
在说解决办法之前,例行惯例,简要的说明一下Html5中的Canvas。Canvas是Html5制图中常用的元素,但其本身并没有绘制能力,它仅仅是图形的容器,要制图还必须依靠脚本。按照Canvas中提供的方法,我们绘制出各种我们想要的图形,本来说这样就已经很棒了,但是有一个致命因素让人很心塞。对美观比较讲究的同学几乎不能忍这个因素,就是绘制的图无比的模糊!!!所以本人在研究过各种办法,也用过国外大神的
我所遇到的canvas上绘制图片,绘制不上去的问题。
场景 哈哈哈,笑死我吧。前几天在做一个H5的时候,给自己挖了个坑,然后跳进去好久,出不来了,最终被大师给救出来了。 该H5是换装类的H5,我要根据用户点击选择的不同衣服、鞋子等搭配,在画布上绘制不同的图片,也就是清除画布和重绘,然后呢,就会出现多张图片绘制是吧。 做法 以前我是这样在canvas上绘制图片的 var img = new Image(); img.onload = fu...
jCanvas.js html5中canvas 绘图插件
压缩版jCanvas.js HTML5 可以直接在你的网页中使用 <canvas> 元素及其相关的 JavaScript API绘制的图形。
react-native 画一画和保存为图片分享及保存。
本文主要使用知识webview和rn通讯;html 中的canvas画布保存为base64地址回掉给rn;本篇为本人亲自写的一个项目活动,现在分享给大家;1.ValentinesDay.js文件/** * Sample React Native App * https://github.com/facebook/react-native * @flow */import React, { Comp...
mpvue微信小程序canvas画图,drawImage不显示
canvasContext.drawImage 定义 绘制图像到画布。 画网络图片到画布上,比如: // 首先需要把图片下载到本地才能开始画图 wx.downloadFile({ url: xxxx, success: function (res) { if (res.statusCode === 200) { ...
js使用canvas绘制高清图片
H5能使用canvas绘制图像,但是有些时候我们需要绘制高清的图片。先介绍下几个定义:什么是devicePixelRatio: window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。 公式表示就是:window.devicePixelRatio = 物理像素 / dips dip或dp,(de
canvas画海报-解决ios不能画图问题
function getWindowInfo() { var windowInfo = {}; windowInfo.dpr = window.devicePixelRatio; if(window.innerWidth) { windowInfo.width = window.innerWidth; } else { windowInfo...
关于vscode中v-for,canvas报错的问题的解决方案
百度康乐很多,包括论坛,最后还是自己动手,最后发现是插件的一个误报,没错,插件的误报,这里面需要改一下插件的配置: 需要把vetur.validation.template这个参数改为false,这里面是不能直接改的,下面是我修改插件配置的教程: 大功告成,你再去看看你的vue中的v-for 还报错吗,觉得可以的留个言加个关注,谢谢!
socket + vue + canvas实践,你画我猜(一)
正式项目未开始,先先自己练手,做一个你画我猜小游戏,先上一个不完善的dome在线地址 http://www.5rgame.com 1.node; 安装socket,启动服务var io = require('socket.io').listen(server);var messages = [];//暂时存放消息//socket连接成功之后触发,用于初始化 io.sockets.on('conne
关于canvas无法通过drawImage加载的原因
在使用drawImage方法的时候,发现无法加载 var can = $('#mycanvas')[0]; var cxt = can.getContext('2d'); var bg = new Image(); bg.src = "img/bg.jpg";
HTML5 canvas画图中的坑
1.圆形头像 // 第一层 底色 ctx.fillStyle = '#99D8D3'; ctx.fillRect(0, 0, 380, 680); // 第二层 白色 ctx.fillStyle = '#ffffff' ctx.fillRect(20, 60, 340, 600); // 画圆 白圈 ...
Canvas绘图分享一:
1、创建画布: &amp;lt;canvas id=&quot;canvas&quot; width=&quot;500&quot; height=&quot;500&quot; style=&quot;background:#eee;&quot;&amp;gt;&amp;lt;/canvas&amp;gt;            注意:                   1、画布宽,高只能使用HTML/JS属性来复制,不能使用CSS。                   2、每个画布上有且只有
canvas(柱状图)
html: Document canvas{ background: #ddd; } 统计图 您的浏览器版本太低,请升级! //柱形图 var c2=document.getElementById('c2'); var ctx=c2.getContext('2d'); //画第一个柱形 $.get('php/1
HTML5 Canvas 开发 绘图方法整理 【十三、Canvas重点之:状态 】
Canvas最重要的两个概念,一个是路径,另一个就是状态了。 要知道,Canvas 是基于“状态”来绘制的,每次绘制(fill() 或 stroke() )的时候都会检查一次程序中所有的“状态”, 如果当前状态没有任何手动的改变,那么就会一直持续下去。 clip() &amp;nbsp; &amp;nbsp; 从原始画布中剪切任意形状和尺寸。 clip()可以将某个基本图形设定为...
HTML5 进阶(8)—Canvas案例:使用canvas仿手机画图解锁
以下这种效果。 使用到的技术 canvas基本操作 canvas的离屏 js的dom2级事件注册处理函数 addEventListenter(eventType,listener,useCapture) eventType:事件类型(click、focus、blur)不带on listener:事件处理函数,可以是匿名函数 useCapture:默认值是false,只冒泡不捕获;t...
canvas绘图
基本用法 &amp;amp;amp;amp;amp;lt;canvas&amp;amp;amp;amp;amp;gt;看起来和&amp;amp;amp;amp;amp;lt;img&amp;amp;amp;amp;amp;gt;标签一样,只是 &amp;amp;amp;amp;amp;lt;canvas&amp;amp;amp;amp;amp;gt; 只有两个可选的属性 width、heigth 属性,指定绘图区域大小,但没有 src、alt 属性。 如果不给&amp;amp;amp;amp;amp;l
android canvas画图、涂鸦断续
用mCanvas.drawLine 方法画出来的线可能会断断续续,原因是onTouchEvent中的move方法并不是每个点都调用的,所以需要在点没有调用方法的时候让两点之间生成二次贝塞尔曲线改进前代码: private void initDraw() { mIvMode1Anim.setOnTouchListener(new View.OnTouchListener() {
Android中Canvas绘图方法的实现
Android中2D图形可以使用Canvas来实现,我们可以通过重写View.onDraw()方法来实现Canvas对象。 常用方法 drawBitmap() 绘制位图 drawCircle() 绘制圆形 drawColor() 绘制填充画布颜色 drawLine() 绘制
Canvas绘图状态的保存和恢复(十)
首先,什么是状态,画布上的路径和位图并不属于状态,应该把状态看做2D渲染上下文属性的描述;是不是很难理解!!! 那就别理解了,看以下的例子你能基本理解这个意思!!! 1、保存绘图状态函数   context.save(); 保存当前画布状态 代码使用:   context.fillStyle = &quot;#123123&quot;; context.save();//保持画布状态 context.fi...
Android中Canvas绘图基础详解(附源码下载)
Android中,如果我们想绘制复杂的自定义View或游戏,我们就需要熟悉绘图API。Android通过Canvas类暴露了很多drawXXX方法,我们可以通过这些方法绘制各种各样的图形。Canvas绘图有三个基本要素:Canvas、绘图坐标系以及Paint。Canvas是画布,我们通过Canvas的各种drawXXX方法将图形绘制到Canvas上面,在drawXXX方法中我们需要传入要绘制的图形的
基于canvas的echars入坑记录
现在做的项目,产品提出了一个新需求——dashboard,果断选择了echars,结果发现,设置完上一层的div的width=100%,自以为OK了,自信的刷新了页面,我操,表格都是扁的!但是将width设置为某一个固定值时,却OK的。由此了解到,浏览器计算100%的宽度时,canvas会根据上层的div的宽高来计算自己的宽高,所以,浏览器的width还没计算出来100%等于多少的时候,canva
图片上画热区/canvas上绘图,相互不覆盖
 思路: 1.canvas保存路径,显示页面用图片热区&amp;lt;map&amp;gt;显示 2.不相互覆盖:这个问题想了好久,一直找操作canvas的方法。今天忽然开窍,还是利用图片热区。         本来是在canvas的点击事件上获取点的位置,然后画路径。后来想到可以把原图和已有的热区加载到页面上并且设置为透明。点击原图的时候获取点的位置,然后画路径。如果点到已有热区上就提示一下。结果真的可以...
canvas画布无法重绘、滋边的问题解决
1,canvas画布无法重绘原因:前一个画布没有清除,导致下一个画布无法绘制解决办法:需要在下一个画布重绘之前清除上一个画布代码:
工作积累(一)——使用canvas实现前台图片base64转码
利用 HTML5 的 标签和 canvasapi ,我们可以得到图片的 base64 码,可以在前台完成图片向 base64 的转码而不用借助后台,下面看一下实现方法。1.HTML 代码片段:HTML 代码非常简单,只需要用到 HTML5 的 标签即可,指定其 id 方便我们找到该元素:但是需要注意的一点是,需要转换为 base64 码的图片都需要事先包含在 标签中,同时这么做可以为我们提供图
自定义View之绘图篇(六):Canvas那些你应该知道的变换
来我的怀里 或者 让我住进你的心里 一仓央嘉措 一、什么是Canvas?什么是Canvas?官方文档是这么介绍的: The Canvas class holds the “draw” calls. To draw something, you need 4 basic components: A Bitma
利用Canvas绘制雷达图
雷达图(蜘蛛网图)是一种常见的数据分析图表,本文采用canvas来绘制雷达图,并最终封装成一个小组件。首先来看一下最终的效果图: 如何画正多边形以正五边形雷达图为例(其他任意正多边形也一样),如下图所示。Canvas画图的原点在左上角,以r为半径,(r, r)为圆心作圆,作为正五边形的外接圆,则正五边形每条边所对应的圆心角均为 rad = 2*Math.PI/5。再根据正余弦可以求得每个定点所
如何使用canvas进行画图
画一个矩形 //创建一个画布 const ctx = wx.createCanvasContext('myCanvas') // 设置矩形边框 ctx.setStrokeStyle('#fff') // 设置矩形宽高 四个参数,前俩个为x,y轴,后俩个是矩形的宽和高 在画布上填充文字 // 设置文字大小 ctx.setFontSize(14) // 设置文字颜色 ctx.fillS...
canvas 使绘制的图片在div 居中显示 ,解决绘图模糊问题
一:绘图在div 居中显示: 首先把canvas当成未知的图片来处理,未知图片的居中显示如下: 二:绘图模糊 canvas作为画布,不能用css和style的方式设置宽高,他有自己特定的属性,width和height。不管当前的图片有多大,画布的宽高设置为图片的二倍,ctx.drawImge()绘制图片后,在用canvas的css再次定义,使其的宽高和图片大小一直,就可以解决canvas绘制
Python自学之路-Python基础教程-24:使用tkinter的Canvas画布组件绘图
要在tkinter的窗口上绘图也是可以做到的,这需要使用Canvas画布组件。   添加一个Canvas对象也很简单,指定宽度和高度,就可以在这个对象上画图。 tkWindow = tk.Tk() draw = tk.Canvas(tkWindow, width=100, height=100)   比如画一个矩形,指定起点坐标和终点坐标: draw.create_rectangle...
alloy团队基于canvas的图片处理插件AlloyImage
题外话:这篇文章主要是因为前端时间写项目过程中 自己学习的alloy的图片处理插件AlloyImage的使用  中间遇到了一些问题  在这里写出来   希望对有的朋友有所帮助 这个是alloy团队的github项目地址  https://github.com/AlloyTeam/AlloyPhoto 先上效果图 上面这么多的按钮都是各种不同的效果,由于比较麻烦我就只上传了几张
用react实现FileReader结合canvas在前端实现压缩图片并在线预览
用react实现FileReader结合canvas在前端实现压缩图片并在线预览 import React, { Component } from 'react'; import './Total.scss' class Imageouput extends Component { constructor(props) { super(props); th...
相关热词 c#异步发送kafka c#窗体编号 c# 操作二进制文件 c# 反射 机制 c#线程 窗体失去响应 c#角度转弧度 c# 解析gps数据 c# vs设置 语法版本 c# json含回车 c#多线程demo