사용하다

development

사용하다

big-blog 2020. 12. 28. 22:24

사용하다

캔버스 요소를 CSS 배경으로 사용할 수 있습니까?

이것은 2008 년부터 WebKit에서 가능했습니다 . 여기를 참조 하십시오 .

<html>
 <head>
 <style>
 div { background: -webkit-canvas(squares); width:600px; height:600px; border:2px solid black }
 </style>

 <script type="application/x-javascript">
function draw(w, h) {
 var ctx = document.getCSSCanvasContext("2d", "squares", w, h);

 ctx.fillStyle = "rgb(200,0,0)";
 ctx.fillRect (10, 10, 55, 50);

 ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
 ctx.fillRect (30, 30, 55, 50);
}
 </script>
 </head>
 <body onload="draw(300, 300)">
   <div></div>
 </body>

</html>

현재 Firefox 4에는 다음과 같은 방식으로 모든 요소 (캔버스 포함)를 CSS 배경으로 사용할 수있는 기능이 포함되어 있습니다.

<p id="myBackground1" style="background: darkorange; color: white;  width: 300px; height: 40px;">
  This element will be used as a background.
</p>
<p style="background: -moz-element(#myBackground1); padding: 20px 10px; font-weight: bold;">
  This box uses #myBackground1 as its background!
</p>

자세한 내용은 Mozilla 해킹 을 참조하세요 .

예!!!! CSS 배경에 캔버스를 넣을 수 있습니다.

var Canvas = document.createElement("canvas");
... do your canvas drawing....
$('body').css({'background-image':"url(" + Canvas.toDataURL("image/png")+ ")" });

나는 이것이 꽤 오래된 질문이라는 것을 알고 있지만이 .toDataURL기능을 사용하여 코드 한 줄로 정답이기 때문에이 페이지를 방문하는 사람들에게 내 대답을 게시하고 싶었습니다 . 캔버스를 지원하는 모든 브라우저에서 작동합니다.

나는 당신이 얻을 수있는 가장 가까운 방법은으로 렌더링하고 canvas, toDataUrl()이미지로 내용을 검색하기 위해 호출 하고, 원하는 요소의 background-image속성에 그 결과를 할당하는 것 입니다. 그래도 정적 배경 만 제공합니다. canvas그러나을 추가로 업데이트하려면 Johan이 이미 제안한대로 캔버스를 다른 요소 뒤에 배치해야합니다.

나는 지난 몇 주 동안 동일한 기능을 달성하기 위해 노력해 왔으며, bcat에서 제안한 것과 동일한 것을 찾은 최고의 솔루션입니다 .

캔버스 렌더링 (표시 또는 숨김)
"canvas.toDataURL"로 캔버스 이미지 가져 오기
이 이미지 데이터를 요소의 배경 이미지로 지정합니다 (MooTools 사용).

나쁜 소식 은 정적 이미지가 훌륭하게 작동 하지만 Chrome의 애니메이션에서는 때때로 "깜박임" 이 발생하고 Firefox에서는 깜박임이 많이 발생한다는 것 입니다. 누군가가이 "불쾌한 깜박임"을 없애기위한 해결 방법을 알고있을 것입니다.

친애하는.
피:.

<!DOCTYPE html>
<html>
<head>
<title>Asign canvas to element background</title>
<script type="text/javascript" src="/js/mootools.1.2.4.js"></script>
<style type="text/css">
* {
    outline:0;
    padding:0;
    margin:0;
    border:0;
}
body {
    color:#fff;
    background:#242424;
}
</style>
<script>
window.addEvent('domready',function() {

//GET BODY
var mibodi = $('mibodi');
var viewportSize = mibodi.getSize();

//GET CANVAS
var micanvas = $('micanvas');
var ctx = micanvas.getContext('2d');
var playAnimation = true;

//GET DIV
var midiv = $('midiv');

//VARIABLES
var rotate_angle = 0;
var rotate_angle_inc = 0.05;

//FUNCIÓN DE INICIALIZACIÓN
function init(){

    ctx.clearRect (0, 0, 512, 512); //CLEAR CANVAS
    ctx.fillStyle = 'rgba(128,128,128,1)';
    ctx.strokeStyle = 'rgba(255,255,255,1)';

    if (playAnimation) {
    setInterval(draw,100);//
  }

} //INIT

//FUNCIÓN DE DIBUJADO
function draw() {

    //CLEAR BACKGROUND
    ctx.clearRect (0, 0, 512, 512);

    //DRAW ROTATING RECTANGLE
    ctx.save();
    ctx.translate( micanvas.width / 2, micanvas.height / 2 );
    ctx.rotate( rotate_angle );
    ctx.fillRect(0, 0, 100, 100);
    ctx.restore();

    //GET CANVAS IMAGE
    var dataURL = micanvas.toDataURL("image/png");

    //SET IMAGE AS BACKGROUND OF THE ELEMENTS
    midiv.setStyle('background-image', 'url(' + dataURL + ')');
    mibodi.setStyle('background-image', 'url(' + dataURL + ')');

    //ANGLE INCREMENT
    rotate_angle = rotate_angle + rotate_angle_inc;

} //DRAW

//BEGIN TO DRAW
init();

});//domeady

</script>
</head>
<body id="mibodi" >

<canvas id="micanvas" width="512" height="512" style="float:left;" style="display:none;">
Este texto se muestra para los navegadores no compatibles con canvas.
<br>
Por favor, utiliza Firefox, Chrome, Safari u Opera.
</canvas>

<div id="midiv" style="width:512px;height:512px;background:#f00;float:left;">
    Sample
</div>

</body>
</html>

Firefox -moz-element(#id)에서 CSS background를 사용해보십시오 .

그리고 -webkit-canvas(name)CSS를위한 background에서 웹킷 기반 브라우저.

toDataURL()사용 성능 저하없이이 동작을 빠르게 에뮬레이션 할 수 있습니다 z-index (허용됨, CSS 이미지 4 / CSS Houdini가 2017 년 현재 "background : element (#mycanvas)"를 구현하지 않았으므로 해결 방법입니다)).

여기서 JSFiddle 작업. 나는 이것을 쓰지 않았고, 모든 신용은 Derek Leung 에게 간다 .

http://jsfiddle.net/DerekL/uw5XU/

You can use CSS Paint API

.elem {
  backgound: paint(squares);
}

See more details here:

Blog posts:

https://vitaliy-bobrov.github.io/blog/exploring-the-css-paint-api/ https://vitaliy-bobrov.github.io/blog/css-paint-in-action-bar-chart/

Demos: https://vitaliy-bobrov.github.io/css-paint-demos/

Unable to comment so I will create my own answer for this.

This answer is based off of @livedo, @Eric Rowell, and @shabunc

http://jsfiddle.net/MDooley47/yj26psdb/

window.i = 0;
function draw(w, h) {
    window.i+=5;
    if (window.webkitURL != null) {
        var ctx = document.getCSSCanvasContext("2d", "squares", 100, 100);


        ctx.fillStyle = "rgb(200,0,0)";
        ctx.fillRect (10, 10, w, h);

        ctx.fillStyle = "rgba(0, 0, 200, 0.5)";

        ctx.fillRect (30, 30, w, h);
    }
    else {
        var ctxmozc = document.getElementById("squares");
        var ctxmoz = ctxmozc.getContext("2d");

        ctxmoz.fillStyle = "rgb(200,0,0)";
        ctxmoz.fillRect (10, 10, w, h);

        ctxmoz.fillStyle = "rgba(0, 0, 200, 0.5)";

        ctxmoz.fillRect (30, 30, w, h);
    }
}
setInterval(function(){draw(window.i, window.i);}, 500);

 div {
     background: -webkit-canvas(squares);
     background: -moz-element(#squares) repeat-x;
     width:575px;
     height:475px;
     border:2px solid black
 }

<body>
    <div></div>
    <canvas id="squares" name="squaresmoz" style="display: none;" ></canvas>
</body>

ReferenceURL : https://stackoverflow.com/questions/3397334/use-canvas-as-a-css-background

'development' 카테고리의 다른 글

헤더 파일에서 정적 const char *를 선언하는 방법은 무엇입니까? (0)	2020.12.28
C #의 확장 메서드에 해당하는 Scala? (0)	2020.12.28
NSString이 특정 문자 (.jpg)로 끝나는 지 어떻게 확인할 수 있습니까? (0)	2020.12.28
함수 내부의 전역 변수에 액세스 할 수 없습니다. (0)	2020.12.28
레이크 인 유닛 및 기능 테스트의 시드 값 사용 (0)	2020.12.28

현재글사용하다

big-blog

사용하다

사용하다

'development' 카테고리의 다른 글

'development'의 다른글

티스토리툴바

사용하다

사용하다 CSS 배경으로

'development' 카테고리의 다른 글

'development'의 다른글

관련글

티스토리툴바

사용하다