avatar

Canvas 摘要

目前正在看2D绘图,所以挑点简单的方法记录下.
首先获取到canvas对象即可,日常的getElementById方法,然后通过getContext('2d')获取Rendering Context(渲染上下文?)

var canvas = document.getElementById('canvasDemo');
if (canvas.getContext){
    var ctx = canvas.getContext('2d');
}

我写Js目前过度依赖JQuery了,所以有时候getElementById老写错 = -

Canvas的空间坐标定义

一张图就能看得很明白了,不说明了

Coordinate space defined

矩形 Rectangles

fillRect(x,y,width,height); //Draws a filled rectangle
strokeRect(x,y,width,height); //Draws a rectangular outline
clearRect(x,y,width,height); //Clears the specified area and makes it fully transparent

绘制路径 Drawing paths

beginPath()
closePath()
stroke()
fill()

beginPath 我也不太清楚干嘛用的,我觉得和moveTo(0, 0) 效果相同啊 = -
closePath 它会尝试用直线连接当前端点(current point)与起始端点来关闭路径,但如果图形已经关闭或者只有一个点,它会什么都不做。
stroke 是绘制图形的边框,fill 会用填充出一个实心图形。

moveTo 与 lineTo

moveTo(x, y)
lineTo(x, y)

我是这样理解的,使用方法完全相同,moveTo只是移动焦点,lineTo增加一个point, 当调用closePath时会连接路径

弧线 Arcs

arc(x, y, radius, startAngle, endAngle, anticlockwise)

画圆或者弧用方法,因为HTML5还在定义,所参数可能会修改
稍微介绍下
x, y是圆心所在位置
radius是半径
startAngle和endAngle 是开始弧度和结束弧度 (比如画圆的话 start就是 0 , end是2π)
Math.PI = π
anticlockwise 为 true 表示逆时针,反之顺时针。

贝塞尔和二次方曲线 Bezier and quadratic curves

Bezier and quadratic curves

quadraticCurveTo(cp1x, cp1y, x, y) //二阶曲线
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)  //三阶曲线

使用方法很简单,但是理解起来很麻烦 = -
二阶的那个方法需要三个点, 起始点(当前坐标) 控制点(cp1x,cp1y) 终止点(x,y)
三阶也类似 只是多了一个控制点(cp2x, cp2y) 而已

未完~

Comments ( 1 ) Trackbacks ( 0 ) Leave a Reply
  1. avatar
    不错不错,学习一下
  1. No trackbacks yet.

    目前尚无任何 trackbacks 和 pingbacks.

    トラックバックはまだありません。

  • ☆*:.。. o(≧▽≦)o .。.:*☆
  • _(:з」∠)_
  • ♪(´ε` )
  • ψ(`∇´)ψ
  • (-_-#)
  • (=´∀`)人(´∀`=)
  • \(//∇//)\
  • ♪(*^^)o∀*∀o(^^*)♪
  • (((o(*゚▽゚*)o)))
  • (´・_・`)
  • σ(^_^;)
  • ( *`ω´)
  • (ノ`Д´)ノ
  • (( _ _ ))..zzzZZ
  • ( ̄▽ ̄)
  • ヽ(`Д´#)ノ
  • ((((;゚Д゚)))))))
  • (>_<)
  • (T_T)
  • ( T_T)\(^-^ )
  • ε=ε=ε=ε=ε=ε=┌(; ̄◇ ̄)┘