HTML5- Canvas入门(二)画线并设置颜色

HTML5- Canvas入门(一)画线

上一节课我们学会了 Canvas画线,绘制了一条黑色的直线,但如果我们想要绘制一条红色的或者其它颜色的线段,该怎么做呢?

答案很简单,使用ctx.strokeStyle来设定描边的颜色即可。我们画三条红色的线段吧:

<canvas id="myCanvas" width="200" height="200" style="border:solid 1px #CCC; margin:30px;">
您的浏览器不支持canvas,建议使用最新版的Chrome
</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d"); //获取该canvas的2D绘图环境对象
ctx.moveTo(0,0);   //咱把“画笔”移到坐标(0,0)
ctx.lineTo(150,50);  //从上个点(0,0)画一条直线,结束点坐标是(150,50)
ctx.lineTo(20,100);  //从上个点(150,50)继续画一条直线,结束点坐标是(20,100)
ctx.moveTo(90,90);   //咱把“画笔”移到坐标(90,90)
ctx.lineTo(80,150);  //从上个点(60,60)继续画一条直线,结束点坐标是(80,150)
ctx.strokeStyle = "red";    //设定描边颜色为红色,只要写在.stroke()方法前面即可
ctx.stroke();  //描边
</script>

HTML5- Canvas入门(二)画线并设置颜色

注意在开始绘制路径的时候,一定要加上moveTo(x,y),否则第一个lineTo()的运动轨迹将不计入绘图中(浏览器会认为没获取到该运动轨迹的起始点,故忽略此线段)。

另外有一个问题,如果上方我们会出来的两条线段(嗯,一条折线,一条直线),我们希望第一条折线是蓝色的,第二条直线是红色的,应当怎么做?

你会地很自然地做如下处理:

<script>
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d"); 
  ctx.moveTo(0,0);   
  ctx.lineTo(150,50);  
  ctx.lineTo(20,100); 
  ctx.strokeStyle = "blue";    //设定描边颜色为蓝色
  ctx.stroke();  
   
  ctx.moveTo(90,90); 
  ctx.lineTo(80,150);  
  ctx.strokeStyle = "red";    //设定描边颜色为红色
  ctx.stroke();  
</script>

但运行脚本会发现,折线除了被描了一遍蓝色,也被描了一遍红色:
HTML5- Canvas入门(二)画线并设置颜色

这是因为canvas在第二次给路径上色时,是把之前的所有路径轨迹合在一起来上色的,除非咱们让canvas知道那折线和直线应该是独立开来的俩路径。

我们可以使用.beginPath()来解决:

<script>
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d"); 
  ctx.moveTo(0,0);   
  ctx.lineTo(150,50);  
  ctx.lineTo(20,100); 
  ctx.strokeStyle = "blue";    //设定描边颜色为蓝色
  ctx.stroke();  
  
  ctx.beginPath();  //告诉canvas咱们要重新绘制一条全新的路径了,之前画的东西从此再无关系
  ctx.moveTo(90,90); 
  ctx.lineTo(80,150);  
  ctx.strokeStyle = "red";    //设定描边颜色为红色
  ctx.stroke();  
</script>

有的朋友一开始会搞不清楚beginPath()的用途,觉得有moveTo()就可以了,其实beginPath()可以做到上述的隔离路径绘制效果的作用,防止之前的效果被污染。

ctx.strokeStyle=”red” 来定义描边颜色为红色,不过ctx.strokeStyle可获值的形式有三种:

ctx.strokeStyle=color|gradient|pattern;  //即支持 “颜色/渐变/图案笔刷” 的赋值
//下面四种形式都是一样的,表示描边颜色为“橙色”
ctx.strokeStyle = "orange";
ctx.strokeStyle = "#FFA500";    //#rrggbb形式
ctx.strokeStyle = "rgb(255,165,0)";   //RGB形式
ctx.strokeStyle = "rgba(255,165,0,1)";   //比上面的rgb多了个a(Alpha),即透明度

渐变gradient,这个稍有复杂:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d"); 
ctx.moveTo(0,0);   
ctx.lineTo(150,50); 
ctx.lineTo(20,100); 

var grd = ctx.createLinearGradient(0,0,170,0);  //定义线性渐变对象,设定渐变线起始点和结束点坐标,坐标格式为(起始点x,起始点y,结束点x,结束点y)
grd.addColorStop(0,"black");   //定义渐变线起点颜色
grd.addColorStop(0.5,"red");   //定义渐变线中间点的颜色
grd.addColorStop(1,"yellow");  //定义渐变线结束点的颜色

ctx.strokeStyle = grd;   //将渐变对象赋值给strokeStyle
ctx.stroke();  //描边

效果如下:
HTML5- Canvas入门(二)画线并设置颜色

这里我们提到了一个概念叫“渐变线”,没有玩过设计的朋友需要了解下渐变的知识点,我们可以把LinearGradient(线性渐变,另有放射状/圆形渐变RadialGradient)范围看成一个矩形(你可以通过Illustator、Photoshop等专业设计软件来辅助你理解这点):

HTML5- Canvas入门(二)画线并设置颜色

一开始定义线性渐变对象的代码 var grd = ctx.createLinearGradient(0,0,170,0) 不外乎就是设定了线性渐变线起始点为(0,0),结束点为(170,0)。

紧接着我们通过 addColorStop( 渐变线位置<0~1>, 颜色 ) 来设定了渐变色值,分别在渐变线0、0.5、1的位置设置了黑色、红色、黄色,其渐变效果如下:

HTML5- Canvas入门(二)画线并设置颜色

通过 ctx.strokeStyle = grd 将渐变赋值给描边方法,最终描边得到了我们想要的渐变效果。

最后看看pattern描边方式,strokeStyle之所以不叫strokeColor是因为它除了支持颜色描边还支持图案描边(搞设计的朋友或许称作笔触描边会更有feel)。

线性渐变描边需要先createLinerGradient(xstart,ystart,xend,yend),那么设置图案描边自然也要先新建一个canvasPattern对象:

createPattern(image, repetitionStyle)

其中参数 image 代表图案对象,一般通过 document.createElement(‘img’) 或者 new Image() ,再定义其src值来创建该对象。
而repetitionStyle参数很好理解,即图案重复形式,其可选值有”repeat” 、”repeat-x”、”repeat-y” 和”no-repeat” (和css的background-repeat可选值一样,不赘述)。

那我们可以试着这样写:

<body>
<canvas id="myCanvas" width="200" height="200" style="border:solid 1px #CCC; margin:30px;">
您的浏览器不支持canvas,建议使用最新版的Chrome
</canvas>

<script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d"); 

    pic = new Image();   //创建图片对象,或者 pic = document.createElement('img')
    pic.src = "http://www.125jz.com/wp-content/uploads/2020/06/logo1.png";   //定义图片的映射地址
    var redTexture = ctx.createPattern(pic, "repeat");   //定义Pattern对象,设定填充图案为pic图片,填充形式为平铺
    ctx.strokeStyle = redTexture;     //定义描边样式为上一行设定的Pattern描边
    ctx.moveTo(80,10);
    ctx.lineTo(10,90);
    ctx.stroke();
</script>

只是在执行效果的时候会发现,执行十次有九次不是我们预期的图片填充效果,而是默认的黑色描边效果,这是为何?

原因在于浏览器可能还未加载完图片pic,就已经执行了ctx.stroke(),解决方法是让ctx在图片pic加载完毕之后才开始执行绘图:

<canvas id="myCanvas" width="200" height="200" style="border:solid 1px #CCC; margin:30px;">
您的浏览器不支持canvas,建议使用最新版的Chrome
</canvas>

<script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d"); 

    pic = new Image();   //创建图片对象,或者 pic = document.createElement('img')
    pic.src = "http://images.cnblogs.com/cnblogs_com/vajoy/558870/o_5.jpg"; 
    pic.onload = patternFill;     //在图片加载完成时执行绘图函数

    function patternFill() {     //定义绘图函数
        var redTexture = ctx.createPattern(pic, "repeat");   
        ctx.strokeStyle = redTexture; 
        ctx.moveTo(80,10);
        ctx.lineTo(10,90);
        ctx.lineWidth = 8;    //定义线段粗度为8像素
        ctx.stroke();
    }
    
</script>

效果如下:
HTML5- Canvas入门(二)画线并设置颜色

注意这里我还加了个 ctx.lineWidth = 8 来设定线段的粗度。

自此我们学习了strokeStyle的三个赋值方式

最后咱们再学习两个很简单的线段属性 lineCap 和 lineJoin。

⑴ lineCap是设定线段端点的形状(线帽),其值可以是

butt    默认,即线条端点为平直的边缘
round   线条端点为圆角线帽
square  为线条端点添加正方形线帽

<canvas id="myCanvas" width="250" height="120" style="border:1px solid #DDD;">
</canvas>

<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.lineWidth=10;

ctx.beginPath();
ctx.lineCap="butt";
ctx.moveTo(20,10);
ctx.lineTo(200,60);
ctx.strokeStyle="red";
ctx.stroke();

ctx.beginPath();
ctx.lineCap="round";
ctx.moveTo(30,90);
ctx.lineTo(200,40);
ctx.strokeStyle="blue";
ctx.stroke();

ctx.beginPath();
ctx.lineCap="square";
ctx.moveTo(10,30);
ctx.lineTo(200,80);
ctx.strokeStyle="green";
ctx.stroke();
</script>

代码效果如下:

HTML5- Canvas入门(二)画线并设置颜色

光看此图可能看不太出“butt”和”square”的区别,但懂得使用AI绘制矢量的同学们应该比较了解:

HTML5- Canvas入门(二)画线并设置颜色

⑵ lineJoin则是设定折线的交接处的外角类型,其值可为:

miter    默认,折线交接处为尖角

round   折线交接处为圆角

bevel   折线交接处为斜角

<canvas id="myCanvas" width="200" height="220" style="border:1px solid #DDD;">
</canvas>

<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

ctx.lineWidth=13;
ctx.lineJoin="bevel";
ctx.moveTo(20,20);
ctx.lineTo(100,50);
ctx.lineTo(20,80);
ctx.strokeStyle="red";
ctx.stroke();

ctx.beginPath();
ctx.lineJoin="round";
ctx.moveTo(20,60);
ctx.lineTo(100,90);
ctx.lineTo(20,150);
ctx.strokeStyle="green";
ctx.stroke();

ctx.beginPath();
ctx.lineJoin="miter";
ctx.moveTo(20,90);
ctx.lineTo(100,150);
ctx.lineTo(20,200);
ctx.strokeStyle="blue";
ctx.stroke();
</script>

效果如下:
HTML5- Canvas入门(二)画线并设置颜色

需要了解的是,miter还受到了属性miterLimit的影响(点此查看详细),但个人觉得它跟bevel实现的效果是一致的,故在此不做介绍。

这就是对canvas线段绘制功能的介绍,共勉~

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/10640.html

(1)
江山如画的头像江山如画管理团队
上一篇 2022年7月9日 下午12:37
下一篇 2022年7月14日 上午9:32

99%的人还看了以下文章

  • 巧用边框线实现立体按钮效果(纯CSS)

    本文教你使用CSS制作立体按钮,代码简单。

    2020年2月2日
    4.2K0
  • 第5课:文本

    文本的显示格式与式样对于网页设计师来说是一个重要问题。这一课将向你介绍CSS在文本布局方面令人激动的特性。本课将对下列CSS属性进行讲解: text-indent text-align text-decoration letter-spacing text-transform 文本缩进[text-indent] CSS属性text-indent用于为段落设置…

    2020年2月22日
    2.3K0
  • 跟永哥学HTML5(3):HTML5新增语义化元素的使用

    上节课我们讲了html5与html4的区别,Html5对语法进行了简化,一个htm5文档结构代码如下: <!doctype html> <html> <head> <meta charset=”utf-8″> <title>无标题文档</title> </head> <…

    2018年1月26日
    3.5K1
  • Marquee标签实现跑马灯、滚动公告、通知效果

    1.Marquee基本语法 <marquee> … </marquee> 实例演示:会移动的文字(Marquee) <marquee>啦啦啦,我会移动耶!</marquee> 2.文字移动属性 (1)方向 :direction=# #=left, right,up,down 例: <marqu…

    2019年2月26日
    7.8K0
  • 第6课:学习更多HTML元素

    到现在,你有没有独立完成过一个网页?你可以的,看看下面的例子: <html> <head><title>125建站网|www.125jz.com</title></head> <body> <h1>一级标题</h1><p>一些文字。。。</p&g…

    2018年1月20日
    2.5K0
  • 第1课:开始学习HTML

    建议你每天学习2到3课,然后花点时间来实验你所学到的新知识。 学习制作网站是件充满乐趣的事,而且一旦掌握它,你便会感到无比满足。好的,不多说,我们现在就开始吧! 这第一课中,我们简要介绍制作网站所需的工具。 需要哪些工具? “浏览器(browser)”你有了,它是用于浏览网站的程序。你现在就是通过浏览器在观看本页面的。 也许你听说过、甚至用过一些网页制作工具…

    2018年1月20日
    3.5K0

发表回复

登录后才能评论