美文网首页
Canvas 绘图详解

Canvas 绘图详解

作者: blue_angel | 来源:发表于2017-07-13 09:44 被阅读0次

线条

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

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

canvas.width = document.body.clientWidth;

canvas.height = document.body.clientHeight;

canvas.width

canvas.height

canvas.getContext('2d');

lineWidth    //线条宽度

strokeStyle  //边框色

fillStyle    //填充色

stroke()    //边框、线条绘制

fill()      //填充绘制

rect(x,y,width,height)  //绘制矩形

fillrect(x,y,widht,height)  //绘制填充矩形

strokeRect(x,y,width,height)  //绘制边框矩形

==============================================

线条属性

lineWidth

//线条两端的冒子样式

lineCap = 'butt' (default)

'round'  //圆形冒子

'square'  //方形冒子

//线条相接的样式

lineJoin = 'miter' (default)  //尖角

'bevel'  //斜街的形式

'round'  //圆角的形式

miterLimit

==============================================

图像变换

save()  //保存绘图状态

restore()  //恢复绘图状态

translate(x,y)  //位移

rotate(deg)  //旋转

scale(sx,sy)  //缩放

变换矩阵:

a  c  e

b  d  f

0  0  1

a,d  水平 垂直缩放

b,c  水平 垂直倾斜

e,f  水平 垂直位移

transform(a,b,c,d,e,f)  //叠加在之前的变换效果之上

setTransform(a,b,c,d,e,f)  //之前的变换效果都失效,重新设置变换效果

==============================================

填充样式  fillStyle  strokeStyle适应fillStyle所有的值

线性渐变 Linear Gradient

var grd = context.createLinearGradient(xstar,ystar,xend,yend);  //创建渐变线条

grd.addColorStop(stop,color);  //关键颜色

线性渐变 Radial Gradient

var grd = context.createRadialGradient(x0,y0,r0,x1,y1,r1);  //创建渐变线条  在两个圆点与半径之间

grd.addColorStop(stop,color);  //关键颜色

createPattern(img,repeat-style);  //图片填充

createPattern(canvas,repeat-style);  //画布填充

createPattern(video,repeat-style);  //音频填充

==============================================

曲线绘制

context.arc(centerx,centery,radius,startingAngle,endingAngle,anticlockwise=false);

圆弧

context.moveTo(x0,y0);

context.arcTo(x1,y1,x2,y2,radius);

贝塞尔二次曲线  http://tinyurl.com/html5quadratic

context.moveTo(x0,y0);

context.quadraticCurveTo(x1,y1,x2,y2);

贝塞尔三次曲线  http://tinyurl.com/html5bezier

context.moveTo(x0,y0);

context.bezierCurveTo(x1,y1,x2,y2,x3,y3);

==============================================

文字渲染

context.font = 'bold 40px Arial'

context.fillText(string,x,y,[maxlen]);

context.strokeText(string,x,y,[maxlen]);

font

默认值:'20px sans-serif'

context.font =

font-style font-variant font-weight font-size font-family

font-style = bold / italic (斜体字) / oblique (倾斜字体)

font-variant = normal / small-caps (小型的大写字母)

font-weight = lighter / normal / bold / bolder

context.textAlign = left / center / right

context.textBaseline = top / middle / bottom  (中文字)

alphabetic / ideographic / hanging  (英文字)

文本的度量

context.measureText(string).width;

==============================================

阴影

context.shadowColor

context.shadowOffsetX

context.shadowOffsetY

context.shadowBlur

globalAlpha = 1 (default)

globalCompositeOperation = 'source-over' (defalut0

source-atop

source-in

source-out

destination-over

destination-atop

destination-in

destination-out

lighter / copy  / xor

剪辑区域

context.clip();

非零环绕原则  制作剪纸效果

context.cleatRect(x,y,width,height);  //清空canvas屏幕

context.isPointInPath(x,y);  //检测坐标点是否在路劲内

==============================================

canvas 标准

W3C        http://www.w3.org/TR/2dcontext/

WHATWG    http://html.spec.whatwg.org/

context.ellipse(x,y,radiusX,radiusY,rotation,startAngle,endAngle,false);  //椭圆

==============================================

Canvas与IE6、7、8等浏览器的兼容问题

exploercanvas    http://code.google.com/p/exploercanvas/

==============================================

Canvas图形库

canvasplus

http://code.google.com/p/canvasplus/

Artisan JS

http://artisanjs.com/

Rgraph

http://roopons.com.au/wp-content/plugins/viral-optins/js/rgraph/

相关文章

  • Android Canvas绘图

    Android Canvas绘图详解包括RectF,canvas.drawArc等,收藏.

  • Android自定义控件

    Android中Canvas绘图基础详解 Android Paint、Canvas、Matrix使用讲解(一、Pa...

  • canvas 手势控制

    基本介绍 关于 canvas 的基本使用,可以参考以下两个网站: Android Canvas绘图详解(图文) -...

  • Android Canvas方法总结最全面详解API(二)

    本节引言: 本节继续带来Android绘图系列详解之Canvas API详解(Part 2),今天要讲解的是Can...

  • Canvas 绘图详解

    线条 var convas = document.getElementById('canvas'); var co...

  • Canvas从入门到放弃 (二)

    在慕课网上学习了 Canvas绘图详解 这门教程,写了这篇canvas教程,想和大家分享学习的过程,希望和大家共同...

  • Canvas从入门到放弃 (三)

    在慕课网上学习了 Canvas绘图详解 这门教程,写了这篇canvas教程,想和大家分享学习的过程,希望和大家共同...

  • Canvas从入门到放弃 (一)

    在慕课网上学习了 Canvas绘图详解 这门教程,写了这篇canvas教程,想和大家分享学习的过程,希望和大家共同...

  • 绘图详解(二)

    一、简单图形五角星的制作 我们生活中常见的五角星如下图所示 只要知道十个点如何表示,画三角形也就简单多了,不难发现...

  • canvas绘图详解(一)

    一、canvas绘图环境 该浏览器不支持canvas元素 在 中添加这段代码相当于创建了一块画布,要使用 元素,...

网友评论

      本文标题:Canvas 绘图详解

      本文链接:https://www.haomeiwen.com/subject/uvfwhxtx.html