canvas基本图形绘制

2019-12-02  本文已影响0人  写前端的大叔

canvasHTML5新增的一个html标签,通过该标签可以绘制一些很炫的图形,游戏、图表、地图都是使用canvas 来完成的。通过对canvas的学习,来简单的进行总结一下,方便日后查看,主要记录一下绘制矩形,三角形,直线,圆弧、曲线、文字、图片等。同理在iOS中调用UIViewdrawRect:方法也要以进行绘制,实现思路其实都差不多,这里主要是用JavaScript来整理。

1.创建画布

绘制所有图形时,需要在画布上进行,创建画面流程主要包括以下3步:
a.创建canvas标签

<canvas id="canvas" width="300" height="300">

其中widthheight属性可以设置画面的宽和高。如果不设置,默认的宽度和高度分别为300px和150px。
b.获取canvas对象

var canvas = document.getElementById('canvas');  

c.获取上下文

var ctx = canvas.getContext('2d');

绘制图形时,都是通过获取到的ctx来对象相应的方法来完成绘制的功能,设置图形的颜色、字体大小、线条的粗细,都是使用ctx来进行绘制。

2.绘制直线

绘制直接是通过使用moveTolineTo两个方法来完成。
context.moveTo(x, y);
绘制直线的点起。x,y为坐标。
context.lineTo(x, y);
用于连接上一个点。如果没有调用moveTo,将以lineTo设置的第一个点做为起点。如下是设置一根直线的代码:

  this.drawLine = function () {
            ctx.moveTo(50,50);
            ctx.lineTo(200,200);
            ctx.stroke();
        }
绘制直线.png
代码中的stroke是对路径进行描边,如果不调用该方法,线条将无法实现,以后无论绘制什么图形,该方法是必须的。

图形基本属性

绘制图形时,可以通过context来绘制图形的一些基本属性,主要包括描边的宽度、颜色、阴影、模糊度、填充样式、字体大小、文字对齐方式等等。下面先介绍一些常用的设置,其余的等到后面用到的时候再做详细的介绍。

a.设置描边宽度

绘制图形时,可以设置lineWidth的值来设置描边的宽度,默认为1px。如下为设置描边的宽度为5。

ctx.lineWidth = 5;

b.设置描边颜色

使用strokeStyle属性可以绘制描边的颜色,strokeStyle的属性值可以是颜色值,也要以是gradient渐变对象,甚至可以是图片。

//设置颜色
ctx.strokeStyle = 'red';

c.设置阴影

通过使用shadowColor设置阴影的颜色,默认为透明黑。使用shadowOffsetX设置阴影的水平偏移大小,使用shadowOffsetY设置阴影的垂直偏移大小。如下所示为设置线条的阴影:

ctx.shadowColor = 'blue';
ctx.shadowOffsetX = 5;
ctx.shadowOffsetY = -5;

d.设置模糊度

使用shadowBlur可以设置模糊度,默认为0,模糊度需要跟阴影一起来设置,如下所示设置模糊度为10:

ctx.shadowColor = 'blue';
ctx.shadowOffsetX = 5;
ctx.shadowOffsetY = -5;
ctx.shadowBlur = 10;
模糊度.png

e.设置线条端点样式

使用lineCap可以设置线条端点的样式,默认为buzzround设置两端为圆角,squar设置两端为直角。如下所示为设置round的效果:

ctx.lineCap = 'round';
lineCap.png

f.设置线条转角样式

通过设置lineJoin的值,可以设置线条连接点转角的样式,默认值为miter,round可以设置转角为圆形,,bevel设置转角为平头。

ctx.lineJoin = 'round';//转角设置为圆形

g.设置虚线

使用setLineDash可以设置虚线,主要是通过传递一个数组,数组中包括两个值,第一个为实线的长度,第二个为虚线的长度,如下所示:

ctx.setLineDash([5,10]);
ctx.moveTo(50,100);
ctx.lineTo(250,100);
ctx.stroke();

3.绘制矩形

绘制矩形有三个方法,分别为rect(),fillRect(),strokeRect()

a.rect()

该方法仅仅是绘制路径,绘制完后,还需要使用stroke()方法进行描边,如果需要填充,还需调用fill()方法,调用rect()方法传入4个参数,分别为x坐标,y坐标,宽度、高度如下所示:

ctx.rect(50,50,200,200);
 ctx.stroke();
矩形.png

b.strokeRect()

使用该方法可以不用调用stroke()而直接显示绘制的图形,如下所示:

ctx.strokeRect(50,50,200,200);

c.fillRect()

使用该方法可以不用调用fill()而直接绘制填充的矩形,如下所示:

ctx.fillRect(50,50,200,200);

4.绘制圆弧

canvas中绘制弧线有两个方法,分别是arcarcToarc可以根据角度来绘制圆弧,而arcTo是根据两个点和一个半径来绘制弧线,主要用于给路径添加一个圆弧。

a.arc()

使用arc绘制圆弧时,需要传递圆心点的x,y坐标,半径,起始角度,结束角度、绘制方法。如下所示:

var ctx = document.getElementById('canvas').getContext('2d');
ctx.arc(100,100,50,0,360 * Math.PI/180);
ctx.stroke();
圆.png

a.arcTo()

使用arc绘制圆弧时,需要传递控制点的x,y坐标和圆弧的半径,如下所示:

ctx.moveTo(20,20);
ctx.arcTo(50,50,150,10,30);
ctx.arcTo(150,150,250,100,60);
ctx.stroke();
弧线.png

5.绘制贝赛尔曲线

绘制贝赛尔曲线主要是通过quadraticCurveTobezierCurveTo来绘制,quadraticCurveTo相比bezierCurveTo少了一个控制点,使用贝赛尔曲线可以绘制出各种复杂的曲线图形。下面以绘制为例子来使用绘制贝赛尔曲线的方法。

var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    ctx.translate(300,300); //设置中心点
    ctx.beginPath();
    ctx.moveTo(0,-100);
    ctx.bezierCurveTo(120,-300, 300,-100, 200,50);
    ctx.lineTo(0,250);
    ctx.lineTo(-200,50);
    ctx.bezierCurveTo(-300,-100, -120,-300, 0,-100);
    ctx.closePath();
    ctx.stroke();
    ctx.fillStyle="#ff0000";
    ctx.fill();
心形.png

6.绘制文字

使用strokeText()fillText()用于绘制文字,strokeText()绘制描边,fillText()填充文字。

   // 文字样式
    ctx.font = '50px STHeiti, SimHei';
    //文字对齐方式
    ctx.textAlign = 'center';
    // 文字先描边
    ctx.lineWidth = 3;
    ctx.strokeStyle = 'red';
    ctx.strokeText('这是文字信息', 200, 120);
    // 再填充
    ctx.fillText('这是文字信息', 200, 120);
文字.png
个人博客
上一篇 下一篇

猜你喜欢

热点阅读