canvas的基础学习

Posted 2021-02-20 jlfw

1、创建canvas

<canvas id="canvas"></canvas>
var canvas = document.getElementById(‘canvas‘)
var context = canvas.getContext(‘2d‘)

使用context进行绘制

2、线

可以设置的状态:
(1) context.lineWidth
(2) context.strokeStyle
(3) context.fillStyle
(4) context.lineCap=butt|round|square
(5) lineJoin=miter|bevel|round
miterLimit默认为10。当miter时有效。设置最大的斜接距离。

绘制直线：

context.beginPath() --指定开始一个全新的路径绘制，坐标点也会被清空，该坐标点是没有，不是从0,0开始。
context.moveTo(100, 100) --指定一个新的坐标点
context.lineTo(200, 200) -- 上一个坐标点到该坐标点
context-closePath() -- 该绘制结束，绘制封闭的多边形

context.lineWidth = 10 --定义绘制的状态
context.fillStyle = ‘red‘ --定义绘制的状态
context.strokeStyle = ‘red‘ --定义绘制的状态

context.fill() -- 绘制填充图形
context.stroke() --绘制描边

绘制矩形：

context.rect(x, y, width, height)
context.fillRect(x, y, width, height)
context.strokeRect(x, y, width, height)

3、弧

(1) arc:

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

(2) arcTo:

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

(3)贝塞尔曲线

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

起点和终点的坐标就是函数的参数
(4)贝塞尔三次曲线

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

4、文字

文字的属性如下：
（1）context.font
（2）context.fillText
（3）context.strokeText

设置文本对齐的属性
（1）context.textAlign=left|middle|right
（2）context.textBaseline=top|middle|bottom

文本的度量:返回字符串的宽度
context.measureText(string).width

其中：font属性的默认值为"20px sans-serif"
font可以设置5个值：font-style, font-variant, font-weight, font-size, font-family
（1）font-style=normal|italic|oblique
（2）font-variant=noraml|small-caps
（3）font-weight=normal|lighter|bold|bolder|400|700等
（4）font-size=20px|20em|20rem
（5）font-family
还可以使用@font-face和web安全字体

context.font="bold 40px Arial"
context.fillText(‘hello‘, 10, 10)

context.lineWidth=1
context.strokeText(‘hello‘, 40, 50)

5、图形变换

（1）context.translate: 整个坐标系改变
（2）context.rotate
（3）context.scale
（4）context.transform(a,b,c,d,e,f):变换矩阵
（5）context.setTransform
需要使用context.save()和context.restore()。restore()使绘制完后，返回save()前的状态。否则后面的状态变换将叠加。在save()和restore()间可以随意的改变状态的变换，而不影响后面的操作。
scale()不仅改变大小，还会改变坐标和线宽度等，有一定的负作用。

6、fillStyle和strokeStyle填充

（1）线性渐变

var grd = context.createLinearGradient(xstart, ystart, xend, yend)
grd.addColorStop(0.0, color)
grd.addColorStop(1.0, color)
context.fillStyle = grd

（2）径向渐变

var grd = context.createRadialGradient(x0,y0,r0,x1,y1,r1)
grd.addColorStop(stop, color)

（3）createPattern
可以填充图像、canvas和video
createPattern(img, repeat-style)
repeat-style: no-repeat|repeat-x|repeat-y|repeat

var bgImg = new Image()
bgImg.src="1.png"
bgImg.onload = function(){
  var pattern = context.createPattern(bgImg, ‘no-repeat‘);
  pattern.fillStyle = pattern;
  context.fillRect(0,0,200,200);
}

7、阴影

设置阴影有如下的属性：
（1）context.shadowColor
（2）context.shadowOffsetX
（3）context.shadowOffsetY
（4）context.shadowBlur

ctx.fillStyle=‘red‘
ctx.shadowColor = ‘black‘
ctx.shadowBlur = 10
ctx.fillRect(0,0,100,100)

8、透明度

设置全局的透明度：globalAlpha=1
设置交叉位置的显示：globalCompositeOperation=source-over|destination-over等共11种值

9、剪切

context.clip()
此方法将剪切当面的画布。可以制作探照灯的效果。

ctx.beginPath()
ctx.arc(300, 300, 150, 0, Math.PI*2);
ctx.clip()

ctx.font="bold 150px Arial";
ctx.fillStyle="black";
ctx.fillText(‘Hello‘, 300, 300)

10、图像处理

(1) 在画布上定位图像：
javascript 语法： context.drawImage(img,x,y);
(2) 在画布上定位图像，并规定图像的宽度和高度：
JavaScript 语法： context.drawImage(img,x,y,width,height);
(3) 剪切图像，并在画布上定位被剪切的部分：
JavaScript 语法： context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
(4)获取像素处理
var imageData = context.getImageData(0,0,canvas.width,canvas.height)
var pixelData = imageData.data
(5)设置像素
context.putImageData()
(6)绘制像素级图片
createImageData()

window.onload = function(){

            canvas.width = 800
            canvas.height = 800

            var imageData = context.createImageData( canvas.width , canvas.height )
            var pixelData = imageData.data

            for( var i = 0 ; i < canvas.height ; i ++ )
                for( var j = 0 ; j < canvas.width ; j ++ ){

                    var p = i*canvas.width+j

                    pixelData[4*p+0] = parseInt(Math.pow(Math.cos(Math.atan2(j-400,i-400)/2),2)*255)
                    pixelData[4*p+1] = parseInt(Math.pow(Math.cos(Math.atan2(j-400,i-400)/2-2*Math.acos(-1)/3),2)*255)
                    pixelData[4*p+2] = parseInt(Math.pow(Math.cos(Math.atan2(j-400,i-400)/2+2*Math.acos(-1)/3),2)*255)
                    pixelData[4*p+3] = 255
                }

            context.putImageData( imageData , 0 , 0 , 0 , 0 , canvas.width , canvas.height )
        }

11.其他

清空操作：context.clearRect(x,y,width,height)
点击检测是否在图像范围内: context.isPointInPath(x,y)
获得鼠标点击canvas，获取点击坐标的方法：

var x = event.clientX-canvas.getBoundingClientRect().left
var y = event.clientY-canvas.getBoundingClientRect().top

11、扩展context的方法

使用CanvasRenderingContext2D.prototype方法来扩展context的方法。