HTML5简明教程-1.1.2.HTML5Canvas参考手册 之 笔触strokeStyle
2014-12-29 08:39
381 查看
今天介绍canvas的另一个重要属性strokeStyle,strokeStyle属性定义了我们在canvas画布上进行图形绘制时的“笔触”,简单点说,就是定义了我们的画笔样式。另外,strokeStyle仅仅定义笔触样式,不能定义填充样式,填充样式需要用fillStyle定义,fillStyle属性在另一篇博文中有详细介绍(/article/2418874.html)。
属性名:strokeStyle
属性描述:strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式。
属性默认值:#000000
属性值:颜色值、渐变或模式
js语法:context.strokeStyle=color|gradient|pattern;
属性值注解:color:指示绘图笔触颜色的
CSS 颜色值。默认值是 #000000。
gradient:用于填充绘图的渐变对象(线性或放射性)
pattern:用于创建 pattern 笔触的 pattern
对象
属性值示例:
(1)渐变。下面我们用渐变笔触绘制了一句:“Merry Christmas”。
(2)颜色。颜色值可以是定义颜色的单词(如:red)、具体颜色值(如:#000000)或者rgba颜色(如:rgba(0,0,255,0.8))
(3)模式。模式指用createPattern()方法所定义的模式对象。
下面是我用于测试的完整代码:
下面是测试效果图:
本文连接:/article/2418875.html
转载请注明出处
属性名:strokeStyle
属性描述:strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式。
属性默认值:#000000
属性值:颜色值、渐变或模式
js语法:context.strokeStyle=color|gradient|pattern;
属性值注解:color:指示绘图笔触颜色的
CSS 颜色值。默认值是 #000000。
gradient:用于填充绘图的渐变对象(线性或放射性)
pattern:用于创建 pattern 笔触的 pattern
对象
属性值示例:
(1)渐变。下面我们用渐变笔触绘制了一句:“Merry Christmas”。
//设置绘制文字大小及字体 cC.font = "30px Verdana"; //定义线性渐变 var lg = cC.createLinearGradient(0, 0, 200, 0); lg.addColorStop("0", "magenta"); lg.addColorStop("0.5", "blue"); lg.addColorStop("1.0", "red"); //将渐变设定为笔触 cC.strokeStyle = lg; //设定绘制文字 cC.strokeText("Merry Christmas", 0, 50);
(2)颜色。颜色值可以是定义颜色的单词(如:red)、具体颜色值(如:#000000)或者rgba颜色(如:rgba(0,0,255,0.8))
//用颜色值设置笔触并绘制矩形线框 cC.strokeStyle = '#3f3f42'; cC.strokeRect(10, 70, 50, 50); //用rgba颜色设置笔触并绘制矩形线框 cC.strokeStyle = 'rgba(0,0,255,0.8)'; cC.strokeRect(70, 70, 50, 50);
(3)模式。模式指用createPattern()方法所定义的模式对象。
//获得img对象 var img = document.getElementById('img'); //图片加载完成后进行绘制操作 img.onload = function() { //创建patten对象 var p = cC.createPattern(img, 'repeat'); //将patten对象设置为笔触 cC.strokeStyle = p; //绘制矩形线框 cC.strokeRect(10, 140, 100, 100); };
下面是我用于测试的完整代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Html5 Canvas strokeStyle</title>
</head>
<body>
<canvas id="can" width="500" height="300"></canvas>
原图:
<img src="3.jpg" alt="原图" id="img">
</body>
<script type="text/javascript">
//获得页面元素
var c = document.getElementById('can');
//调用html5相关方法获得2D对象
var cC = c.getContext('2d');
//用颜色值设置笔触并绘制矩形线框 cC.strokeStyle = '#3f3f42'; cC.strokeRect(10, 70, 50, 50); //用rgba颜色设置笔触并绘制矩形线框 cC.strokeStyle = 'rgba(0,0,255,0.8)'; cC.strokeRect(70, 70, 50, 50);
//设置绘制文字大小及字体 cC.font = "30px Verdana"; //定义线性渐变 var lg = cC.createLinearGradient(0, 0, 200, 0); lg.addColorStop("0", "magenta"); lg.addColorStop("0.5", "blue"); lg.addColorStop("1.0", "red"); //将渐变设定为笔触 cC.strokeStyle = lg; //设定绘制文字 cC.strokeText("Merry Christmas", 0, 50);
//获得img对象 var img = document.getElementById('img'); //图片加载完成后进行绘制操作 img.onload = function() { //创建patten对象 var p = cC.createPattern(img, 'repeat'); //将patten对象设置为笔触 cC.strokeStyle = p; //绘制矩形线框 cC.strokeRect(10, 140, 100, 100); };
</script>
</html>
下面是测试效果图:
本文连接:/article/2418875.html
转载请注明出处
相关文章推荐
- HTML5简明教程-1.1.5.HTML5Canvas参考手册 之 放射渐变 createRadialGradient
- HTML5简明教程-1.1.4.HTML5Canvas参考手册 之 线性渐变 createLinearGradient
- HTML5简明教程-1.1.1.HTML5Canvas参考手册 之 填充fillStyle
- HTML5简明教程-1.1.3.HTML5Canvas参考手册 之 阴影shadowColor、shadowBlur、shadowOffsetX、shadowOffsetY
- 国外最新HTML5教程和参考手册
- HTML5编码教程和参考手册资料分享
- 分享最好的HTML5编码教程和参考手册
- 分享最好的HTML5编码教程和参考手册
- 分享最好的HTML5编码教程和参考手册
- 【HTML5】最好的HTML 5编码教程和参考手册分享
- 最好的HTML5编码教程和参考手册推荐
- 分享最好的HTML5编码教程和参考手册
- 分享最好的HTML5编码教程和参考手册
- 分享最好的HTML5编码教程和参考手册
- 最好的HTML5编码教程和参考手册推荐
- plain framework 1 参考手册 入门指引之 简明教程
- HTML5编码教程和参考手册资料分享
- 分享最好的HTML5编码教程和参考手册
- 分享最好的HTML5编码教程和参考手册