Canvas

Posted 2020-08-28

想要使用Canvas，首先要有<canvas>元素。

<canvas id="drawing" width="200" height="200"> Here shows something.</canvas>

然后进入JS文件，先获取这个canvas元素

var drawing=document.getElementById("drawing");

然后判断浏览器是否支持<canvas>，这一步很重要。但是有些浏览器比如Firefox3中会为<canvas>创建DOM对象，但是该对象中并没有getContext()方法。所以应该这样判断浏览器是否支持<canvas>

if(drawing.getContext){}

这里的context是上下文，所谓上下文就是函数所依赖的外部变量。前面是我总结轮子哥所说的话

★★★★★ 2D上下文

向context传入2D可以获得2D上下文对象，可以绘制简单的2d图形。2D上下文的坐标开始于<canvas>元素的左上角，X越大表示越靠右，Y越大表示越靠下。width和height表示水平和垂直防线可用的像素数目。

★ 填充和描边

var drawing=document.getElementById("drawing");
if(drawing.getContext){
    var context=drawing.getContext("2d");
//边框颜色;
    context.strokeStyle="red";
//填充颜色;
    context.fillStyle="#0000FF";
}

★ 绘制矩形

var drawing=document.getElementById("drawing");
if(drawing.getContext){
    var context=drawing.getContext("2d");
//绘制红色填充矩形;
    context.fillStyle="#FF0000";
    context.fillRect(10,10,50,50);
//绘制蓝色半透明填充矩形;
    context.fillStyle="rgba(0,0,255,0.5)";
    context.fillRect(30,30,50,50);

绘制边框线矩形

var drawing=document.getElementById("drawing");
if(drawing.getContext){
    var context=drawing.getContext("2d");
//绘制红色填充矩形;
    context.strokelStyle="#FF0000";
    context.strokeRect(10,10,50,50);
//绘制蓝色半透明填充矩形;
    context.strokeStyle="rgba(0,0,255,0.5)";
    context.strokeRect(30,30,50,50);

★ 绘制路径

绘制路径前，必须在获得2d上下文之后，调用 context.beginPath() 方法。

//绘制固定圆心画弧线
context.arc(x,y,radius,startAngle,endAngle,counterclockwise)
//固定起点以给定的半径画弧线
context.arcTo(x1,y1,x2,y2,radius)
//贝塞尔曲线
//从上一点开始绘制，到(x,y)结束，并且以(c1x,c1y)和(c2x,c2y)为控制点
context.bezierCurveTo(c1x,c1y,c2x,c2y,x,y)
//从上一点绘制直线到(x,y)为止
context.lineTo(x,y)
//将游标移动到(x,y)
context.moveTo(x,y)
//绘制二次曲线，以(cx,cy)为控制点
context.quadraticCurveTo(cx,cy,x,y)
//绘制矩形路径
context.rect(x,y,width,height)

★ 绘制文本

//context.font表示文本样式大小及字体
context.font="bold 14px Arial"
//context.textAlign表示文本对齐方式，当属性值分别为 start 和 end，代表从左和从右阅读方式。
context.textAlign="center"
//context.textBaseLine表示文本的基线
context.textBaseLine="middle"
//fillText(),strokeText()绘制文本，三个参数分别为 要绘制的文本字符串 x坐标 y坐标 最大像素宽度(可选)
context.fillText("abc",100,20);

★ 变换

//围绕原点旋转图像angle弧度
rotate(angle)
//缩放图像，x方向和y方向分别缩放scaleX和scaleY倍，默认值1.0
scale(scaleX,scaleY)
//将坐标原点移动到(x,y)
translate(x,y)

★ 保存当前的context设置

context.save();

★ 返回到上一次保存的context设置

context.restore();