详解html5 canvas常用api总结(二)--绘图API


Posted in HTML / CSS onDecember 14, 2016

canvas可以绘制出很多奇妙的样式和美丽的效果,通过几个简单的api就可以在画布上呈现出千变万化的效果,还可以制作网页游戏,接下来就总结一下和绘图有关的API。

绘画的时候canvas相当于画布,而context相当于画笔。

1.绘制线条

moveTo(x0,y0):把当前画笔(ictx)移动到(x0,y0)这个位置。

lineTo(x1,y1):从当前位置(x0,y0)处到(x1,y1)画一条直线。

beginPath():开启一条路径或者重置当前路径。

closePath():从当前点回到路径起始点,也就是上一个beginPath的位置,回避和路径。

stroke():绘制。必须加了这个函数才会画图,所以这个一定要放在最后。

var icanvas=document.getElementById("iCanvas");

var ictx=icanvas.getContext("2d");

ictx.beginPath();

ictx.moveTo(0,0);

ictx.lineTo(300,150);

ictx.lineTo(3,150);

ictx.closePath();

ictx.stroke();

效果:

详解html5 canvas常用api总结(二)--绘图API

这里要注意,如果closepath放在stroke函数后面,则不会绘制成一个闭合的线条,因为在闭合前,已经绘制了,所以左边那条直线不会画出来。

2.线条样式

lineCap:线条端点样式,butt,round,square。                        

详解html5 canvas常用api总结(二)--绘图API

lineJoin:两线条相交时的拐点样式,其中设置为miter时还可以通过miterLimet设置拐点交界处的最大长度。

 

详解html5 canvas常用api总结(二)--绘图API

miterLimet:如果斜接长度超过 miterLimit 的值,边角会以 lineJoin 的 "bevel" 类型来显示。

lineWidth:线条宽度

strokeStyle: 线条颜色、渐变(定义好的渐变对象)、模式。 context.strokeStyle="#333";

var iCanvas=document.getElementById("iCanvas");

var ictx=iCanvas.getContext("2d");

ictx.beginPath();

ictx.strokeStyle="#0000ff";

ictx.lineWidth=20;

ictx.lineCap="round";

ictx.moveTo(10,10);

ictx.lineTo(80,80);

ictx.stroke();

ictx.beginPath();//在这里必须beginPath,不然一直会以第一个为基础会话,在最后的stroke的时候,会再次画一条黑色的斜线,一共3条线。

ictx.strokeStyle="#000000";

ictx.lineCap="butt";

ictx.lineWidth=10;

ictx.moveTo(80,10);

ictx.lineTo(10,80);

ictx.stroke();

beginPath和closePath可以不成对出现,两者之间几乎没有关系,closePath是用来闭合终点和起始点画一条闭合路径的。

3.绘制曲线

arc(x,y,radius,startAngle,endAngle,anticlockwise):绘制曲线,radius是曲线半径,startAngle,endAngle开始角度和结束角度,用的是弧度(Math.PI/180)*角度值,anticlockwise绘制方向;

arcTo(x1,y1,x2,y2,radius):绘制两切线之前的曲线。

ictx.beginPath();

ictx.moveTo(20,20);           // 创建开始点

ictx.lineTo(100,20);          // 创建水平线

ictx.arcTo(150,20,150,70,50); // 创建弧

ictx.lineTo(150,120);         // 创建垂直线

ictx.stroke();

绘制曲线的起点和水平线结束点与设置的第一个点的连线相切,曲线的终点和第一个设置点与第二个设置点的连线相切。

详解html5 canvas常用api总结(二)--绘图API

quadraticCurveTo(x1,y1,x2,y2):二次贝塞尔曲线。(x1,y1)控制点的坐标,(x2,y2)结束点的坐标

bezierCurveTo(x1,y1,x2,y2,x,y):三次贝塞尔曲线。(x1,y1)控制点1的坐标,(x2,y2)控制点2的坐标 (x,y)结束点的坐标。

贝塞尔曲线在绘制一些非常流畅的曲线时非常有用。 

4.绘制矩形及填充

rect():创建矩形;

fillRect(x,y,width,height):绘制被填充的矩形:(x,y)起始点,width,height矩形宽高

strokeRect():绘制矩形线框

clearRect():清除掉矩形。

ictx.fillStyle="#0000ff";//设定填充颜色

ictx.fillRect(20,20,150,100);

ictx.strokeRect(180,20,100,100);

5.画笔属性

fillStyle:设置填充的颜色,渐变或模式(patten);

strokeStyle:画笔的颜色,渐变或者模式

6.绘制阴影

shadowColor:阴影yanse

shadowBlur:模糊级别

shadowOffsetX:阴影的水平距离

shadowOffsetY:阴影的垂直距离

ictx.shadowBlur=20;

ictx.shadowColor="#456";

ictx.shadowOffsetX=-10;

ictx.shadowOffsetY=30;//先设置阴影再画矩形

ictx.fillStyle="#108997";

ictx.fillRect(20,20,100,80);

ictx.stroke();

详解html5 canvas常用api总结(二)--绘图API

 7.绘制渐变

 createLinearGradient(x1,y1,x2,y2):绘制线性渐变,(x1,y1)是渐变的起始点,(x2,y2)是渐变的终点,位置不同可以制作出垂直或者水平渐变。

 createRadialGradient(x1,y1,r1,x2,y2,r2):径向渐变:,(x1,y1)是渐变的起始点圆心,r1是半径,(x2,y2)是渐变的终点,r2是结束点半径;

两种渐变都需要使用

addColorStop(stop,color)来设置渐变过程,stop是0.0到1.0的值。

var grd=ictx.createLinearGradient(0,0,170,0);

grd.addColorStop(0,"#000");

grd.addColorStop(0.5,"#378923");

grd.addColorStop(1,"#ddd");

ictx.fillStyle=grd;//这里渐变是一个对象,用来向fillstyle传值

ictx.fillRect(20,20,150,100);

 

var grd=ictx.createRadialGradient(300,225,15,250,225,100);

grd.addColorStop(0,"#345");

grd.addColorStop(1,"#fff");

ictx.fillStyle=grd;

ictx.fillRect(200,150,150,100);

详解html5 canvas常用api总结(二)--绘图API

8.填充背景

 createPattern(image,"repeat|repeat-x|repeat-y|no-repeat"):image是一个图片对象,后面的参数是用来设定图片的重复方式。

 9.其他相关API

fill():填充当前路径。

isPointInPath():ictx.isPointInPath(x,y);判断这个点是否位于当前路径

清除画布方法:获取画布的宽高,icanvas.height,icanvas.width;然后使用clearRect();

修改画布的宽高:icanvas.width='200';icanvas.width='300'的方法。

globalAlpha:设置透明度,只能是0~1的数字,如果透明度不一样,在画第二幅之前重新设置即可。

toDataURL:icanvas.toDataURL(type,encoderOptions),这个函数返回一个image的base64的URI,参数都是可选的,type可以设置图片类型如image/jpeg,image/webp,默认是image/png;encoderOptions是一个0~1的数字,用来设置image/jpeg,image/webp的图片质量,其他格式的type设置这个参数无效。

 10.剪裁

clip():从画布中剪裁任意形状和尺寸的画布,之后所有的绘图都会被限制在剪裁的区域内。这个方法通常和绘制矩形,圆形等路径一起使用,在这些方法后面,剪切这个图像,后来画的就必须在这个剪切后的画布上了。

ictx.arc(100,100,50,(Math.PI/180)*0,(Math.PI/180)*360,true);

ictx.stroke();

ictx.clip();

ictx.fillStyle="green";

ictx.fillRect(0,0,150,100);

详解html5 canvas常用api总结(二)--绘图API

如果还想操作外部的画布,在剪切前使用save()函数保存,剪切后使用restore()函数恢复到之前保存的状态,但是中间做的操作不会消失哈。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
利用CSS3的flexbox实现水平垂直居中与三列等高布局
Sep 12 HTML / CSS
css3绘制天猫logo实现代码
Nov 06 HTML / CSS
CSS3制作半透明边框(Facebox)类似渐变
Dec 09 HTML / CSS
初探CSS3中的calc()功能
Jul 14 HTML / CSS
CSS3制作炫酷带方向感应的鼠标滑过图片3D动画
Mar 16 HTML / CSS
利用HTML5+CSS3实现3D转换效果实例详解
May 02 HTML / CSS
css3实现圆锥渐变conic-gradient效果
Feb 12 HTML / CSS
CSS3实现苹果手机解锁的字体闪亮效果示例
Jan 05 HTML / CSS
html5 迷宫游戏(碰撞检测)实例一
Jul 25 HTML / CSS
HTML5 Canvas基本线条绘制的实例教程
Mar 17 HTML / CSS
详解Canvas 跨域脱坑实践
Nov 07 HTML / CSS
css position fixed 左右双定位的实现代码
Apr 29 HTML / CSS
HTML5 Canvas玩转酷炫大波浪进度图效果实例(附demo)
Dec 14 #HTML / CSS
详解使用HTML5 Canvas创建动态粒子网格动画
Dec 14 #HTML / CSS
H5新属性audio音频和video视频的控制详解(推荐)
Dec 09 #HTML / CSS
Html5 Geolocation获取地理位置信息实例
Dec 09 #HTML / CSS
详解移动端html5页面长按实现高亮全选文本内容的兼容解决方案
Dec 03 #HTML / CSS
HTML5标签大全
Nov 23 #HTML / CSS
HTML5拖放效果的实现代码
Nov 17 #HTML / CSS
You might like
php Imagick获取图片RGB颜色值
2014/07/28 PHP
刷新PHP缓冲区为你的站点加速
2015/10/10 PHP
javascript实现仿银行密码输入框效果的代码
2007/12/13 Javascript
JavaScript中为什么null==0为false而null大于=0为true(个人研究)
2013/09/16 Javascript
jquery分析文本里url或邮件地址为真实链接的方法
2015/06/20 Javascript
jquery实现的仿天猫侧导航tab切换效果
2015/08/24 Javascript
Vuejs第七篇之Vuejs过渡动画案例全面解析
2016/09/05 Javascript
BootStrap轮播HTML代码(推荐)
2016/12/10 Javascript
基于JS实现二维码图片固定在右下角某处并跟随滚动条滚动
2017/02/08 Javascript
webpack 1.x升级过程中的踩坑总结大全
2017/08/09 Javascript
浅谈webpack下的AOP式无侵入注入
2017/11/12 Javascript
Vue.js 利用v-for中的index值实现隔行变色
2018/08/01 Javascript
vue项目创建并引入饿了么elementUI组件的步骤
2019/04/11 Javascript
微信小程序页面渲染实现方法
2019/11/06 Javascript
js、jquery实现列表模糊搜索功能过程解析
2020/03/27 jQuery
vue+elementUI(el-upload)图片压缩,默认同比例压缩操作
2020/08/10 Javascript
nuxt 自定义 auth 中间件实现令牌的持久化操作
2020/11/05 Javascript
Python读写配置文件的方法
2015/06/03 Python
Python安装pycurl失败的解决方法
2018/10/15 Python
详解安装mitmproxy以及遇到的坑和简单用法
2019/01/21 Python
在Python中使用turtle绘制多个同心圆示例
2019/11/23 Python
python 常用日期处理-- datetime 模块的使用
2020/09/02 Python
HTML5 window/iframe跨域传递消息 API介绍
2013/08/26 HTML / CSS
美国知名的百货清仓店:Neiman Marcus Last Call
2016/08/03 全球购物
在线购买廉价折扣书籍和小说:BookOutlet.com
2018/02/19 全球购物
英国礼品和生活方式品牌:Treat Republic
2020/11/21 全球购物
普通PHP程序员笔试题
2016/01/01 面试题
酒店前厅员工辞职信
2014/01/08 职场文书
大学总结自我鉴定
2014/01/18 职场文书
一份教室追逐打闹的检讨书
2014/09/27 职场文书
四风专项整治工作情况汇报
2014/10/28 职场文书
工作失误检讨书范文
2015/01/26 职场文书
python之np.argmax()及对axis=0或者1的理解
2021/06/02 Python
OpenCV-Python直方图均衡化实现图像去雾
2021/06/07 Python
Java字符串逆序方法详情
2022/03/21 Java/Android
css如何把元素固定在容器底部的四种方式
2022/06/16 HTML / CSS