canvas 相关问题

Canvas是自由格式图形输出的通用元素。

如何下载画布作为图像,其中包括drawimage()

<img id="soundc_icon" src="http://upload.wikimedia.org/wikipedia/commons/8/87/Google_Chrome_icon_(2011).png"/> <canvas width="500" height="300" id="canvas">Sorry, no canvas available</canvas> <a id="download">Download as .PNG</a> <script> var canvas = document.getElementById('canvas'), ctx = canvas.getContext('2d'); var img = document.getElementById("soundc_icon"); /** * Demonstrates how to download a canvas an image with a single * direct click on a link. */ function doCanvas() { /* draw something */ ctx.fillStyle = '#f90'; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = '#fff'; ctx.font = '60px Lucida Grande'; ctx.fillText('Code Project', 10, canvas.height / 2 - 15); ctx.font = '26px Lucida Grande'; ctx.fillText('Click link below to save this as image', 15, canvas.height / 2 + 35); //I WANTO TO INCLUDE THIS AND STILL BE ABLE TO DOWNLOAD //ctx.drawImage(img,10,10); } /** * This is the function that will take care of image extracting and * setting proper filename for the download. * IMPORTANT: Call it from within a onclick event. */ function downloadCanvas(link, canvasId, filename) { link.href = document.getElementById(canvasId).toDataURL(); link.download = filename; } /** * The event handler for the link's onclick event. We give THIS as a * parameter (=the link element), ID of the canvas and a filename. */ document.getElementById('download').addEventListener('click', function() { downloadCanvas(this, 'canvas', 'test.png'); }, false); /** * Draw something to canvas */ doCanvas(); </script>

回答 1 投票 0

NODEJS-如何将文件中的图像数据添加到canvas

应该读取图像文件,然后在画布模块的帮助下将文件数据添加到画布中。 当我运行此代码时,我会收到错误消息映像不是对...

回答 1 投票 0

使用JetPack组成,当定时器值降低时,您如何创建一个弧形降低的弧?

使用JetPack组成,我正在尝试创建动画弧。发生的动画涉及当计时器的值降低时,弧的扫角尺寸降低。这是一个漂亮的c ...

回答 1 投票 0

收集数据来自第三方Facebook应用程序

可能是一个新手问题,但我需要一些信息来了解我的想法。

回答 1 投票 0


旋转时像素图像模糊,jscanvas

当在JS画布上绘制图像时,图像模糊。请参阅所附图像。 模糊,旋转: 没有模糊,不旋转: 我将imageMoothingEnabled设置为false和image-

回答 1 投票 0

我如何在屏幕宽度上使用效应?

const [screenWidth, setScreenWidth] = useState(window.screen.width); const screenFun = () => { setScreenWidth(window.screen.width) } const playerFun = (screenWidth) => { if(screenWidth >= 2100){ console.log('width bigger than 2100') setPlayerWidth(18); setPlayerHeight(12); }; if(screenWidth >= 1850 && window.screen.width < 2100){ console.log('width bigger than 1850') setPlayerWidth(30); setPlayerHeight(20); }; } const Canvas = props => { const canvasRef = useRef(null); useEffect(() =>{ const canvas = canvasRef.current const context = canvas.getContext('2d') setCanvasWidth((canvas.width*(0.5))-10); setCanvasHeight((canvas.height*(0.5))-15); console.log('width: '+canvas.width+' height is: '+canvas.height) context.fillStyle = '#00f4cc' context.fillRect(canvasWidth, canvasHeight, playerWidth, playerHeight) },[]) return <canvas ref={canvasRef} {...props}/> } useEffect(() =>{ screenFun(); }) useEffect(() =>{ playerFun(); },[screenWidth])

回答 2 投票 0

回答 1 投票 0

有人可以帮我吗?

<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <style> #myCarousel { height: 500px } .carousel-inner > .item > img, .carousel-inner > .item > a > img { width: 70%; margin: auto; } canvas { position: relative; /*pointer-events:none;*/ top: 0; left: 0 } /* Particles Canvas*/ #particles-js{ height: 500px; width: 100%; background-color: #D0EDF5; background-image: url(''); background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; } </style> </head> <body> <div class="container"> <br> <div id="myCarousel" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <h1>First Slide</h1> </div> <div class="item"> <div id="particles-js"></div> </div> <div class="item"> <h1>Third Slide</h1> </div> </div> <!-- Left and right controls --> <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div> <script type="text/javascript" src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script> <script type="text/javascript"> particlesJS('particles-js', { "particles": { "number": { "value": 60, "density": { "enable": true, "value_area": 800 } }, "color": { "value": "#0A8B80" }, "shape": { "type": "circle", "stroke": { "width": 0, "color": "#000000" }, "polygon": { "nb_sides": 5 }, "image": { "src": "img/github.svg", "width": 100, "height": 50 } }, "opacity": { "value": 0.5, "random": false, "anim": { "enable": false, "speed": 1, "opacity_min": 0.1, "sync": false } }, "size": { "value": 20, "random": true, "anim": { "enable": false, "speed": 40, "size_min": 0.1, "sync": false } }, "line_linked": { "enable": true, "distance": 150, "color": "#65BBC4", "opacity": 0.4, "width": 2 }, "move": { "enable": true, "speed": 6, "direction": "none", "random": false, "straight": false, "out_mode": "out", "attract": { "enable": false, "rotateX": 600, "rotateY": 1200 } } }, "interactivity": { "detect_on": "canvas", "events": { "onhover": { "enable": true, "mode": "repulse" }, "onclick": { "enable": true, "mode": "push" }, "resize": true }, "modes": { "grab": { "distance": 400, "line_linked": { "opacity": 1 } }, "bubble": { "distance": 400, "size": 80, "duration": 2, "opacity": 8, "speed": 3 }, "repulse": { "distance": 200 }, "push": { "particles_nb": 4 }, "remove": { "particles_nb": 2 } } }, "retina_detect": true, "config_demo": { "hide_card": false, "background_color": "#D0EDF5", "background_image": "", "background_position": "50% 50%", "background_repeat": "no-repeat", "background_size": "cover" } } ); </script> </body> </html>

回答 1 投票 0



CANVAS.TODATAURL()安全错误该操作是不安全的

当我试图获取屏幕截图并将其保存为PNG时,将视频上传到服务器时,我遇到了以下问题 我希望你能解决我的问题... /*输出图像显示视图*/ $('#

回答 5 投票 0

回答 2 投票 0

无需在画布上渲染图像 我正在尝试使用JavaScript创建一个简单的游戏。我将JavaScript作为一种爱好,但我没有专业。我使用Chatgpt的帮助来编写我的代码,因此它可能不必要地大而混乱 -

i我用脚本来管理此主屏幕,一旦主屏幕过渡,我计划使用另一个名为demo.js的文件来管理游戏。 简而言之,script.js的工作方式与游戏引擎一样,而演示JS包含游戏数据。

回答 0 投票 0

不能使用Canvas Event Listners绘制HTML画布中的矩形 我正在画布内绘制一个矩形,我将上下文作为功能参数,正如您在Draw函数中看到的那样。当我尝试使用上下文绘制矩形时,它起作用。

async draw( ctx: OffscreenCanvasRenderingContext2D, { width, height }: { width: number; height: number } ) { this.canvas = document.getElementById("player") as HTMLCanvasElement; this.ctx = ctx; this.ctx.globalCompositeOperation = "source-over"; this.ctx.fillStyle = "red"; this.ctx.fillRect(0, 0, 100, 100); for (let i = 0; i < 100; i++) { this.ctx.fillStyle = "red"; this.ctx.fillRect(100 + i, 200 + i, 100, 100); } console.log("Context draw", this.ctx); this.addEventListeners(); }

回答 1 投票 0


如何在比例转换期间保持稳定的变换 - 有光标位置?

I有一个帆布组件,该组件使用变换原孔在光标位置缩放元素。问题是,当比例> 1时,只需移动光标(没有任何其他交互),原因是...

回答 1 投票 0

Svelte SVG 绘制画布在构建后显示损坏的图像

我正在使用 Svelte,我尝试将 SVG 转换为图像。 SVG 已经渲染,但中心的徽标尚未渲染。我使用 canvas 来获取 SVG 图像并在中心绘制徽标。正如你所看到的,一切都是......

回答 1 投票 0

找不到类:com.android.graphics.CanvasView

我在我的项目中使用这个库,但出现错误: 找不到类“com.android.graphics.CanvasView” 我该如何修复它? 我在我的项目中使用这个库,但出现错误: class 'com.android.graphics.CanvasView' not found 我该如何修复它? <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <com.android.graphics.CanvasView android:id="@+id/canvas" android:layout_width="match_parent" android:layout_height="600dp" android:layout_gravity="center_horizontal" /> </LinearLayout> 在Java代码中: package com.example.falah.paint2; import android.os.Bundle; import android.support.v7.app.AppCompatActivity; public class DrawActivity extends AppCompatActivity { private CanvasView canvas; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_draw); canvas = (CanvasView)this.findViewById(R.id.canvas); } } 根据我们在评论中的讨论, 此存储库的所有者没有在 JitPack 或 JCenter 等任何服务上托管此库,否则添加此库应该只是在应用程序级 build.gradle 文件中添加一行代码。 现在,您可以从其存储库此处下载代码并将其粘贴到名为 CanvasView.java 的文件中 您需要在 CanvasView.java 和使用 com.android.graphics.CanvasView 的布局文件中相应地更新包名称,并将其替换为 com.example.falah.paint2.CanvasView 如果有人仍然坚持这种依赖, 这里是依赖的链接 或 将其添加到您的项目级别 gradle 文件中: allprojects { repositories { ... maven { url 'https://jitpack.io' } } } 这在你的应用程序级别 gradle 中: dependencies { implementation 'com.github.infotech-group:CanvasView:1.0.0' }

回答 2 投票 0

HTML5 画布中的动画 GIF

在HTML5中,如何在画布中轻松绘制(请不要太多复杂的代码)动画GIF(使用drawImage时画布中仅显示第一帧)

回答 6 投票 0

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.