canvas(3)

来源：互联网发布：微信多级分销系统源码编辑：程序博客网时间：2024/06/05 14:51

canvas中fillStyle属性和fillRect()方法的用法：

var c=document.getElementById("mycanvas");

var context=c.getContext("2d");

至此创建了一个画布，现在可以在上面进行绘制了。

context.fillStyle="red";

fillStyle这个属性是用于设置颜色、渐变和模式的

至此填充颜色为红色，但还是没有效果，因为我们需要给定一个范围来展示

这是需要用到方法fillRect()，此方法用于绘制矩形

context.fillRect(0,0,100,100);//x轴起始点，y轴起始点，宽度，高度

源码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>canvas(3)</title>
</head>
<body>
<canvas id="mycanvas"></canvas>
</body>
<script>
var c=document.getElementById("mycanvas");
/*getContext用于返回一个对象*/
var context=c.getContext("2d");
/*至此创建了一个画布，现在可以在上面进行绘制了。*/
context.fillStyle="red";
context.fillRect(20,20,150,100);
</script>
</html>

效果图：

阅读全文

0 0