描边样式设置
描边样式 strokeStyle
可以接收3种类型的值:
a. 颜色值: 十六进行, rgb, rgba, 单词
b. 用于描边的渐变对象
cxt.strokeStyle="red"
填充样式设置
填充样式 fillStyle
可以接收3种类型的值:
a. 颜色值: 十六进行, rgb, rgba, 单词
b. 用于描边的渐变对象
cxt.strokeStyle = "blue";
代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>04_Canvas样式设置</title>
<style type="text/css">
#Canvas {
border: 1px solid red;
display: block;
margin: 50px auto;
}
</style>
</head>
<body>
<canvas id="Canvas" width="1000" height="500">请升级浏览器</canvas>
<script type="text/javascript">
var Canvas = document.getElementById("Canvas");
//1. 设置宽高
Canvas.width = 1000;
Canvas.height = 500;
//2. 获取对象上下文对象(核心), 画笔
var cxt = Canvas.getContext("2d");
/*
* 3. canvas里, 绘制图形分两种:
* 3.1 绘制路径
* 3.2 绘制图形
* a. 描边图形, 可以设置描边的样式,
带有stroke的属性或者方法
* b. 填充图形, 可以设置填充的样式,
带有fill的属性或者方法
*/
/*
* 1. 描边样式 strokeStyle
* 属性, 可以接收3种类型的值:
* a. 颜色值: 十六进行, rgb, rgba, 单词
* b. 用于描边的渐变对象
*/
cxt.strokeStyle = "rgba(0, 255, 0, 0.5)";
cxt.beginPath();
cxt.moveTo(100, 100);
cxt.lineTo(200, 100);
cxt.lineTo(200, 200);
cxt.lineTo(100, 200);
cxt.closePath();
cxt.stroke();
/*
* 2. 填充样式 fillStyle
* 可接收的值与strokeStyle相同
*/
cxt.strokeStyle = "blue";
// cxt.fillStyle = "yellow";
cxt.beginPath();
cxt.moveTo(300, 100);
cxt.lineTo(300, 300);
cxt.lineTo(500, 300);
cxt.closePath();
cxt.stroke();
cxt.fill();
/*
* 描边或者填充的样式一旦设置,
会影响接下来绘制的所有图像, 如果要修改,
在绘制之前重新修改
*
* 描边和填充默认值是黑色
*/
</script>
</body>
</html>
