canvas基础知识

1、描边：只在图形的边缘画线。

var canvas = document.getElementById('canvas');
canvas.width = 800;//canvas宽
canvas.height = 500;//canvas高
var context = canvas.getContext('2d');//获取绘图上下文环境

context.beginPath();//声明开始绘制新的路径
context.moveTo(100,100);//线起点
context.lineTo(700,400);//线转折
context.lineTo(100,400);//线转折
context.lineTo(100,100);//线终点
context.closePath();//路径定义结束

context.lineWidth = 5;//线宽
context.strokeStyle = '#005588';//线颜色
context.stroke();//绘制线

2、填充：用指定样式（颜色、渐变或图形）填充图形。

context.fillStyle = 'rgb(2,100,30)';//填充色
context.fill();//填充

3、圆弧

语法：context.arc(centerx,centery,radius,startingAngle,endingAngle,anticlosewise = false);

注：弧度值有五个（0*Math.PI, 0.5*Math.PI, 1*Math.PI, 1.5*Math.PI,  2*Math.PI），位置上对应圆的0°，90°，180°，270°，360°。

当顺时针绘制时（默认），弧度值按顺序，当逆时针绘制，则绘制顺序为（2*Math.PI, 1.5*Math.PI, 1*Math.PI, 0.5*Math.PI, 0*Math.PI）。

context.beginPath();
context.lineWidth = 2;
context.strokeStyle = "#005588";
context.arc(600,100,50,0*Math.PI,1.5*Math.PI);
context.closePath();//closePath()会自动帮我们封闭路径的首尾
context.stroke();

4、矩形（填充式绘制、描边式绘制）。

（1）填充绘制（fillRect()）

context.fillStyle = '#ff0000';
context.fillRect(10,10,50,50);//绘制矩形fillRect(x坐标, y坐标, 宽, 高)，填充指定的颜色。
context.fillStyle = 'rgba(0,0,255,0.5)';
context.fillRect(10,70,50,50);//绘制一个矩形，以半透明的蓝色填充。

（2）描边绘制（strokeRect()）

context.strokeStyle = '#ff0000';
context.strokeRect(10,130,50,50);//绘制矩形strokeRect(x坐标, y坐标, 宽, 高)，以指定的颜色描边。

5、清除画布上指定的矩形区域（clearRect()）.

context.clearRect(20,20,30,30);//清除矩形区域clearRect(x坐标, y坐标, 宽, 高)。

6、绘制图像drawImage()

　　drawImage(img, 源图像x坐标, 源图像y坐标, 源图像图像宽, 源图像图像高, 目标图像x坐标, 目标图像y坐标, 目标图像图像宽, 目标图像图像高)；

var img = new Image();
img.src = 'fanfan.jpg';
img.onload = function(){   
　　context.drawImage(img,100,30,300,400,10,10,300,400);
}

7、导出canvas元素绘制的图像（toDataURL()）

var imgURL = canvas.toDataURL('image/png');
var image = document.createElement('img');
image.src = imgURL;
document.body.appendChild(image);

注：浏览器默认图像编码为png格式，除非另指定。

8、globalAlpha 用于设置所有绘制的透明度，默认值为0。

context.fillStyle = 'rgba(280,187,188,1)';
context.fillRect(10,10,100,100);

context.globalAlpha = 0.5;//透明度为0.5

context.fillStyle = 'rgba(180,187,188,1)';
context.fillRect(20,20,80,80);

9、globalCompositeOperation 表示后绘制的图形怎样与先绘制的图形结合。

context.globalAlpha = 1;
context.fillStyle = 'rgba(280,187,188,1)';
context.fillRect(150,150,100,100);

context.globalCompositeOperation = 'source-in';//重叠部分可见，其他透明。

context.fillStyle = 'rgba(180,187,188,1)';
context.fillRect(160,160,80,80);

 10、isPointInPath（）；判断canvas中的某个点（x ,y）是否在当前路径中

context.isPointInPath(x, y);

 

转载于:https://www.cnblogs.com/cornlin/p/7613131.html