Canvas绘图-原创手记-慕课网

基本用法
getContext(“2d”):获取2D上下文
toDataURL()可以导出在canvas上绘制的图像
填充和描边
fillStyle和strokeStyle
绘制矩形
strokeRect()和fillRect()
绘制路径
首先要调用beginPath()
clip：剪切画板
closepath:连接起终点
绘制文本
fillText()
strokeText()
变换
rotate()：旋转绘制的图形
scale()：缩小或放大绘制的图形
translate():变更绘制原点
绘制图像
drawImage()
阴影
设置属性后绘制会带阴影
shadowColor
shadowOffsetX
shadowOffsetY
shadowBlur
渐变
线性渐变

var drawing = document.getElementById("drawing");            
//make sure <canvas> is completely supported
if (drawing.getContext){

    var context = drawing.getContext("2d"),
        gradient = context.createLinearGradient(30, 30, 70, 70);


    gradient.addColorStop(0, "white");
    gradient.addColorStop(1, "black");

    //draw a red rectangle
    context.fillStyle = "#ff0000";
    context.fillRect(10, 10, 50, 50);

    //draw a gradient rectangle
    context.fillStyle = gradient;
    context.fillRect(30, 30, 50, 50);
}

径向渐变

var drawing = document.getElementById("drawing");
            
//make sure <canvas> is completely supported
if (drawing.getContext){

    var context = drawing.getContext("2d"),
    gradient = context.createRadialGradient(55, 55, 10, 55, 55, 30);


    gradient.addColorStop(0, "white");
    gradient.addColorStop(1, "black");

    //draw a red rectangle
    context.fillStyle = "#ff0000";
    context.fillRect(10, 10, 50, 50);

    //draw a gradient rectangle
    context.fillStyle = gradient;
    context.fillRect(30, 30, 50, 50);
}

模式
绘制重复的图像
需要注意的是，模式是在原点开始的，只表示在某个特定的区域内显示重复的图像，而不是要从某个位置开始绘制重复图像
使用图像数据
getImageData获取指定区域的图像
putImageData把图像绘制到图像上
合成
全局属性globalAlpha和globalCompositionOperation
globalAlpha:绘制透明度