Canvas

最新推荐文章于 2023-10-30 23:25:34 发布

chiza4954

最新推荐文章于 2023-10-30 23:25:34 发布

阅读量101

点赞数

原文链接：https://my.oschina.net/u/3240534/blog/857171

版权

Canvas绘图

取得绘图上下文对象的引用——getContext()方法

取得2D上下文对象——getContext("2d")

var drawing=document.getElementById("drwaing");
if(drawing.getContext){
var context=drawing.getContext("2d")
}

导出在<canvas>元素上绘制的图像——toDataURL()方法

var drawing=document.getElementById("drwaing");
if(drawing.getContext){
    var imgURI=drawing.toDtatURL("image/png");
    var image=document.createElement("img");
    image.src=imgURI;
    document.body.appendChild(image);
}

2D上下文

绘图操作

填充——fillStyle属性

描边——strokeStyle属性

绘制矩形

绘制矩形并指定填充颜色——fillRect(x,y,width,height) || fillStyle属性

绘制矩形并指定描边颜色——strokeRect(x,y,width,height) || strokeStyle属性

清除画布上的矩形区域——clearRect(x,y,width,height)

var drawing=document.getElementById("drwaing");
if(drawing.getContext){
    var context=drawing.getContext("2d");
    context.strokeStyle="red";
    context.fillRect(10,10,50,50);

    context.fillStyle="rgba(0,0,255,0.5";
    context.fillRect(30,30,50,50);
}

绘制路径

开始绘制新路径——beginPath()

绘制弧线——arc(x,y,radius,startAngle,endAngle,counterclockwise)

圆心坐标(x,y)，半径radius，起始和结束角度(startAngle,endAngle)

是否按顺时针方向计算——counterclockwise

绘制弧线——arcTo(x1,y1,x2,y2,radius)

绘制直线——lineTo(x,y)

移动绘图游标——moveTo(x,y)

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

绘制一条连接到路径起点的线条——closePath()

路径绘图操作

填充——fill()

描边——stroke()

var drawing=document.getElementById("drwaing");
if(drawing.getContext){
    var context=drawing.getContext("2d");
    context.beginPath();

    context.arc(100,100,99,0,2*Math.PI,false);

    context.moveTo(194,100);
    context.arc(100,100,94,0,2*Math.PI,false);

    context.moveTo(100,100);
    context.lineTo(100,15);

    context.moveTo(100,100);
    context.lineTo(35,100);

    context.stroke();
}

绘制文本

——fillText(string,x,y)

——strokeText(string,x,y)

确定文本大小——measureText()

属性——font、textAlign、textBaseline

var drawing=document.getElementById("drwaing");
if(drawing.getContext){
    var context=drawing.getContext("2d");
    context.font="bold 14px Arial";
    context.textAlign="center";
    context.textBaseline="middle";
    context.fillText("hello world",100,20);
}

变换

旋转——rotate(angle)

缩放——scale(scaleX, scaleY)

平移——translate(x, y)

重置变换矩阵——setTransform()

修改变换矩阵——transform()

保存设置——save()

返回之前保存的设置——restore()

绘制图像

绘制图像——drawImage()

阴影

阴影颜色——属性shadowColor

形状或路径X轴方向的阴影偏移量——属性shadowOffsetX

形状或路径Y轴方向的阴影偏移量——属性shadowOffsetY

模糊的像素数——shadowBlur

var drawing=document.getElementById("drwaing");
if(drawing.getContext) {
    var context = drawing.getContext("2d");
    context.shadowOffsetX=5;
    context.shadowOffsetY=5;
    context.shadowBlur=4;
    context.shadowColor="rgba(0,0,0,0.5";

    context.fillStyle="#ff0000";
    context.fillRect(10,10,50,50);
}

渐变

创建线性渐变——createLinearGradient(x1,y1,x2,y2)

指定色标——addColorStop()

将填充或描边样式设置为渐变对象，使用渐变来填充或描边

var drawing=document.getElementById("drwaing");
if(drawing.getContext) {
    var context = drawing.getContext("2d");

    var gradient = context.createLinearGradient(30, 30, 70, 70);
    gradient.addColorStop(0, "white");
    gradient.addColorStop(1, "black");

    context.fillStyle=gradient;
    context.fillRect(30,30,50,50);
}

创建径向渐变——createRaidalGradient()

指定色标——addColorStop()

var drawing=document.getElementById("drwaing");
if(drawing.getContext) {
    var context = drawing.getContext("2d");

    var gradient = context.createRadialGradient(55,55,10,55,55,30);;
    gradient.addColorStop(0, "white");
    gradient.addColorStop(1, "black");

    context.fillStyle=gradient;
    context.fillRect(30,30,50,50);
}

模式

模式：重复的图像，可以用来填充或描边图形

创建模式——createPattern()

将填充样式设置为模式对象，只表在某个特定的区域显示重复的图像

var drawing=document.getElementById("drwaing");
if(drawing.getContext) {
    var context = drawing.getContext("2d");
    var image=document.images[0];
    var pattern=context.createPattern(image,"reapeat");

    context.fillStyle=pattern;
    context.fillRect(10,10,150,150);
}

使用图像数据

使用图像数据——getImageData(x,y, width,height)

var drawing=document.getElementById("drwaing");
if(drawing.getContext) {
    var context = drawing.getContext("2d");
    var imageData = context.getImageData(10, 5, 50, 50);
    var data=imageData.data,
        red=data[0],
        green=data[1],
        blue=data[2],
        alpha=data[3];
}