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)

时间: 2024-10-10 19:46:47

canvas学习api的相关文章

Html5 学习系列(五)Canvas绘图API快速入门(2)

Canvas绘图API Demos 上一篇文章中,笔者已经给大家演示了怎么快速用Canvas的API绘制一个矩形出来.接下里我会在本文中给各位介绍Canvas的其他API:绘制线条.绘制椭圆.绘制图片.图片处理等...如果想获得更好的阅读效果请点击老马的独立博客地址. 一.Canvas绘制线条 Context对象的beginPath方法表示开始绘制路径,moveTo(x, y)方法设置线段的起点,lineTo(x, y)方法设置线段的终点,stroke方法用来给透明的线段着色.moveto和li

html5 canvas 学习笔记(一)

一.canvas元素API canvas元素并未提供很多API,实际上他只提供了两个属性与三个方法: 1.canvas元素属性 width 属性:与 height 属性: canvas元素绘图表面的宽度,在默认状况下,浏览器会将canvas元素大小设定成与绘图表面大小一致,然而如果在css中覆写了元素大小,那么浏览器则会将绘图表面进行缩放,使之符合元素尺寸.其值为非负整数,默认值为300. 2.canvas元素方法 getContext()方法: 返回与该canvas元素相关的绘图环境对象,每个

引言:Canvas绘图API快速入门

引言:Canvas绘图API快速入门 在接触HTML5的初学者包括我都在很多地方见到非常炫的一些页面,甚至好多学习HTML5的开发者都是冲着Web端的页游去的,那么HTML5那么绚丽的页面效果以及游戏动画效果的原理是怎样的?本篇文章将带您在20分钟内快速了解和上手HTML5游戏开发的神器:Canvas绘制API. 一.Canvas是什么? Canvas就是一个画布,可以进行画任何的线.图形.填充等一系列的操作,而且操作的画图就是js,所以让js编程到了嗑药的地步.另外Canvas不仅仅提供简单的

Canvas 学习笔记1

#Canvas 学习笔记1 @[Canvas,Nunn,HTML5,javascript] ##前言 相信大家多多少少都有了解过`Canvas`,这里我就不多做解释了,网上也充斥了这方面的知识,很多人看了之后,其实发现作用非常小,因为似乎这些东西什么也做不了,本着学习提升自己,造福大家,我打算把我学习`Canvas`的历程记录在这里. 首先推荐大家先看看阮一峰大大写的这个[Canvas API](http://javascript.ruanyifeng.com/htmlapi/canvas.ht

canvas常用api文件

初识js起便开始接触canvas,总觉得h5是未来发展的趋势,更是门很装逼的艺术.其实canvas并不是html而是js,因为属于html标签,暂时把它放在html里写.个人对于canvas下的原生“弱智”画图api比较感兴趣,而对于cocos2d-html5这样的框架没啥兴趣,曾经也在公司利用cocos2d框架做过游戏,因为终究不是做游戏的料,放弃了,但是对于canvas的爱好,是不会变的.利用canvas,几行代码就能有神奇的装逼效果.已经一年多没接触canvas了,等我有时间补上canva

[HTML5 Canvas学习]使用颜色和透明度

在canvas中使用颜色和透明度,通过context的strokeStyle和fillStyle属性设置,strokeStyle和fillStyle的值可以是任意有效的css颜色字串.可以用RGB.RGBA.HSL.HSLA以及十六进制RGB标注来指定颜色,也可以通过 "yellow"."silver"."teal"这样的颜色名称来指定.除此之外,还可以使用SVG1.0规范中的颜色名称,比如"goldenrod"."

[HTML5 Canvas学习]绘制矩形

1.使用strokeRect和fillRect方法绘制矩形 a.strokeRect是绘制一个不填充的矩形 b.fillRect是绘制一个填充的矩形 代码: <script> var canvas = document.getElementById('canvas'), context = canvas.getContext('2d'); context.lineJoin = 'round'; context.lineWidth = 20; context.strokeRect(10, 10,

[转载]Android Bitmap和Canvas学习笔记

http://blog.chinaunix.net/uid-20771867-id-3053339.html [转载]Android Bitmap和Canvas学习笔记,布布扣,bubuko.com

canvas学习总结三:绘制虚线

上一章节我们说到,线性路径的绘制,主要利用movoTo(),lineTo()等方法,当然 Canvas 2D API 也提供了虚线的绘制方法,CanvasRenderingContext2D.setLineDash(); 下面我们就来看看虚线的绘制方法 语法 ctx.setLineDash(segments); 参数 segments: 一个Array数组. 一组描述交替绘制线段和间距(坐标空间单位)长度的数字. 如果数组元素的数量是奇数, 数组的元素会被复制并重复.例如, [5, 15, 25