canvas标签的基本用法

Posted xiaoqi2018

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了canvas标签的基本用法相关的知识,希望对你有一定的参考价值。

1、canvas和其他标签一样使用,但是IE8以下是不支持的,可以在canvas里面加一个span用来提示,例如:

<canvas>
    <span>IE8不支持canvas</span>
</canvas> 

另外画布的大小,需要直接在内联样式里面设置,而不要在外部样式表里面设置,在外部样式表里设置宽高后,canvas里面的元素也会同比缩放,例如:

<canvas id="c1" width="400" height="400">
    <span>IE8不支持canvas</span>
</canvas>

2.画方形

oC.fillRect(x,y,w,h); 4个参数依次为x坐标,y坐标,宽,高。同理边框矩形也是oC.strokeRect(x,y,w,h);

绘图之前可以设置绘图样式:

oGC.fillStyle = ‘red‘;
oGC.strokeStyle = ‘blue‘;
oGC.lineWidth = 10;
oGC.lineJoin = ‘bevel‘;//控制线的边角 miter(默认)  round(圆角)  bevel(斜角)

3、绘制路径

设置路径的相关方法beginPath()  closePath()  moveTo()  lineTo()

设置好路径后,通过oGc.storke()或者oGc.fill()来绘制

同理也可以在绘制前设置样式,直线还有一个特殊的样式,端点样式oGc.lineCap = ‘round‘ 用的不多

还有两个方法,用来将设置样式值针对某一块代码的oGc.save()  oGc.restore().

示例代码:

oGC.save();
    
    oGC.fillStyle = ‘red‘;
    
    oGC.beginPath();
    
    oGC.moveTo(100,100);
    
    oGC.lineTo(200,200);
    
    oGC.lineTo(300,200);
    
    oGC.closePath();
    
    oGC.fill();
    
    oGC.restore();
    
    
    oGC.beginPath();
    
    oGC.moveTo(100,200);
    
    oGC.lineTo(200,300);
    
    oGC.lineTo(300,300);
    
    oGC.closePath();
    
    oGC.fill();

4、绘制弧形路径

相关方法:oGC.arc(200,200,150,0,90*Math.PI/180,true);参数一次是圆心坐标,半径,起始弧度,结束弧度,是否逆时针方向。

几个绘制其他弧形的方法:

oGC.arcTo(100,100,200,100,100);  oGC.quadraticCurveTo(100,100,200,100); oGC.bezierCurveTo(100,100,200,200,200,100); 和贝塞尔曲线相关,用的不多。

5.变换

变换也是有三种translate,scale,rotate

6.插入图片

drawImage(obj,x,y,w,h);  五个参数依次是图片对象,x,y坐标,宽高。由于图片得提前加载好,所以可以利用图片预加载,当图片加载好了之后,在执行往canvas里面插入图片。

7.设置背景

createPattern(obj,‘repeat‘);  两个参数依次是图片对象和平铺方式。用法如下:

var bg = oGC.createPattern(obj,‘repeat‘);
oGC.fillStyle = bg;
oGC.fillRect(0,0,300,300);

8.渐变

线性渐变:createLinearGradient(x1,y1,x2,y2);  4个参数依次是起始点的坐标,结束点的坐标。用法如下:

var obj = oGC.createLinearGradient(150,100,250,200);
obj.addColorStop(0,‘red‘);
obj.addColorStop(0.5,‘yellow‘);
obj.addColorStop(1,‘blue‘);
oGC.fillStyle = obj;
oGC.fillRect(150,100,100,100);

放射性渐变:createRadialGradient(x1,y1,r1,x2,y2,r2); 参数依次是第一个圆的坐标和半径,第二个圆的坐标和半径。用法如下:

var obj = oGC.createRadialGradient(200,200,100,200,200,150);
obj.addColorStop(0,‘red‘);
obj.addColorStop(0.5,‘yellow‘);
obj.addColorStop(1,‘blue‘);
oGC.fillStyle = obj;
oGC.fillRect(0,0,oC.width,oC.height);

9.添加文字

fillText(‘你好‘,x,y); 参数依次是需要添加的文字,以及坐标  strokeText用法一样。

在添加文字之前,需要设置一些文字的样式。例如:

oGc.font = ‘60px impact‘;  oGc.textBaseline = ‘top‘(上下对齐方式) 

还可以通过oGc.measureText(str).width;来获取宽度,高度和文字大小相等。综合用法如下:

oGC.font = ‘60px impact‘;
    
oGC.textBaseline = ‘top‘;  //middle bottom
    
var w = oGC.measureText(‘hello word‘).width;
    
oGC.fillText(‘hello word‘,(oC.width - w)/2,(oC.height - 60)/2);

10.添加阴影

oGc.shadowOffsetX = 10;//偏移量

oGc.shadowColor = ‘red‘; //阴影颜色

oGc.shadowBlue = 3 //模糊值




以上是关于canvas标签的基本用法的主要内容,如果未能解决你的问题,请参考以下文章

canvas

canvas入门级基本用法实现雨滴下落特效

cavas总结

JavaScript之Canvas画布

canvas画板基础应用的学习

初识canvas