css canvas画布 |css背景框投影

在HTML中使用canvas标签可以描绘出各种图形，但是在css中使用canvas元素暂时无法直接奏效，因此，需要一个canvas画布的HTML元素，这样，大家才可以在canvas上应用css样式。

以下是一个在html中引用canvas画布的例子：

<canvas id="myCanvas" width="400" height="400"></canvas>

以上代码中ID为“myCanvas”的元素是一个cancas画布，它的宽度和高度都是400px。

接下来，大家可以应用CSS样式：

#myCanvas {
background-color: #FFFFFF;
border: 2px dotted #000000;
}

以上CSS的作用是为canvas画布设置背景白色、描绘一个带黑色边框的点状线。

最后，大家可以开始在画布中描绘图形：

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(200, 200, 50, 0, Math.PI * 2);
ctx.fillStyle = "#0095DD";
ctx.fill();
ctx.closePath();

以上JS代码创建了一个半径为50像素的圆，并将它描绘在画布的中心（200,200），颜色为蓝色（#0095DD）。

这就是canvas画布与css的结合使用，可以创建各种图形。如果你很了解HTML5画布和CSS，那么你可以利用这种技术来创建炫酷的效果。