canvas学习api

Posted 落落月

tags:

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

1、canvas.getContext():获取渲染上下文和绘画功能;

一、绘制矩形

2、ctx.fillRect(x,y,width,height):绘制矩形;

3、ctx.strokeRect(x,y,width,height):绘制矩形边框;

4、ctx.clearRect(x,y,width,height):清除矩形;

二、绘制路径

5、ctx.beginPath():新建路径开始命令;

6、ctx.closePath():路径闭合之后绘制命令重新回到上下文;

7、stroke():通过线条来绘制图形轮廓;

8、fill():填充路径内容途径生成实心图形;

三、移动笔触

moveTo(x,y);

四、实线

lineTo(x,y):绘制一条从当前位置到x,y位置的实线;

五、圆弧

arc(x,y,radius,startAngle,endAngle,方向(默认顺时针));

六、贝塞尔以及二次贝塞尔

quadraticCurveTo(cp1x,cp1y,x,y):cp1x,cp1y是贝塞尔曲线的控制点,x,y是结束点;

二次贝塞尔: bezierCruveTo(cp1x,cp1y,cp2x,cp2y,x,y)多了两个控制点;

七、Path2D(不太详细)

八、颜色填充

fillStyle = color:设置图形的填充颜色;

strokeStyle = color:设置图形轮廓的颜色;

九、设置透明度

ctx.globalAlpha = (0~1);

十、线型 line styles

1、lineWidth = width;设置线的宽度(注意:线的宽度是从宽度中心向两边各绘制宽度的一般,因此要准确落在边缘需要减半计算);

2、 lineCap = type:设置线条末端样式,type有 butt,round,square,默认是butt,

3、 lineJoin,设置线条交接处样式,值 有round,bevel,miter;默认是miter;

4.miterLimit,设置外延交点和连接点的最大距离,超出最大距离则变成bevel;

5、setLineDash和setLineOffset设置虚线样式;

十一、渐变  Gradients

1、线性渐变 createLinearGradient(x1,y1,x2,y2),参数规定起始位置和结束位置,即线性方向;

2、径向渐变  createRadialGradient(x1,y1,r1,x2,y2,r2);

3、颜色值设定 addColorStop(position,color);position是渐变位置(0~1),color是颜色;

注:gradient对象其实也是一种颜色,要用fillStyle引用;

十二、状态保存与恢复 

save()和restore();

十三、移动原点 

translate(x)

以上是关于canvas学习api的主要内容,如果未能解决你的问题,请参考以下文章

canvas学习

canvas学习笔记

Canvas学习系列二:Canvas的坐标系统

[Canvas学习]动画

canvas的基础学习

html5 canvas 学习