<p>CSS 배경에 캔버스 삽입
<p>질문이 생깁니다: 캔버스 요소를 CSS 스타일의 배경으로 활용할 수 있습니까?
<p>웹킷 호환성
<p>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><p>
위 내용은 캔버스를 CSS 배경으로 사용할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
