canvas杂记

canvas标签

<canvas width=600 height=400></canvas>

//1. 拿到画布

var canvas = document.querySelector("canvas");

//2. 创建画图工具（画家）， 本质上是个js专门用来绘图的一个对象; 它提供了所有的关于绘图的属性和方法

var context = canvas.getContext("2d");

画线api

1.	moveTo(x,y)

2.	lineTo(x,y)

3.	stroke() //描边

4.	fill() //填充

其他一些api：

1.	beginPath()

    //创建新的玻璃纸

	//为了避免重复印刷，我们就重新创建一张新的空白的玻璃纸，将后面要绘制的图形，画在这个新的玻璃纸上

2.	closePath()

	//把路径闭合

设置颜色api

//描边

//默认情况下， 填充色和描边都是黑色的

//设置描边色

context.strokeStyle = "red"; //颜色的写法和css写法是一样的

context.stroke();

//填充

//设置填充色

context.fillStyle = "yellowgreen";

context.fill();

关于路径填充问题-非零填充原则

//非零填充原则

//在由路径围成的区域内部，任意一个点， 拉一条射线。 看和这个射线相交的路径有几条。 路径的方向是顺时针，就是1. 如果逆时针，就是-1， 把所有的值相加， 如果是0， 就不填充， 如是非0， 就填充

例子（自己体会）：

    //画两个三角形

    //顺时针绘制

    context.moveTo(0, 100);

    context.lineTo(400, 100);

    context.lineTo(400, 400);

    //把路径闭合

    context.closePath();

    //路径是逆时针绘制

    context.moveTo(200, 200);

    context.lineTo(300, 240);

    context.lineTo(300, 200);

    context.closePath();

    context.fillStyle = "red";

    context.fill();

绘制矩形api

1.直接传入 x， y， width， height， 就可以绘制一个矩形

 context.rect(100, 100, 200, 200);

 context.strokeStyle = "red";

 context.stroke();

 context.fillStyle = "yellow";

 context.fill();	

2. 直接创建一个描边的矩形

//创建玻璃纸， 画矩形路径， 描边， 把玻璃纸销毁

 context.strokeStyle = "red";

 context.strokeRect(100, 100, 200, 200);

3. 直接创建一个填充的矩形

//创建玻璃纸， 画矩形路径， 填充， 把玻璃纸销毁

context.fillRect(100, 100, 200, 200);

//注意：  黄色的边不会显示，是因为上面那一句，画完之后，就把玻璃纸销毁了

context.strokeStyle = "yellow";

context.stroke();

绘制圆型api

语法：

	context.arc(x, y, radius, startRadian, endRadian, direction);

画弧形：

	context.arc(300, 200, 100, 0, 0.5*Math.PI); //画弧形

    context.stroke();

画扇形：

	//从31度的地方，画到81度的地方

    context.arc(300, 200, 100, 31/180*Math.PI, 81/180*Math.PI);

    //画完扇形之后，再画线到圆心， 再关闭路径

    context.lineTo(300, 200);

    context.closePath();

    context.fill();

线条api

1.	线条粗细

	//设置线条的粗细， 不需要加px

	context.lineWidth = 15;

2.	线条头部

	//线条的头部的设置

	context.lineCap = "round"; //默认是butt， 记住round

线性渐变

1. 需要创建出一个渐变对象

	var gradient = context.createLinearGradient(100, 100, 300, 380);

2. 添加渐变颜色

	gradient.addColorStop(0, "red");

    gradient.addColorStop(0.5, "hotpink");

    gradient.addColorStop(1, "yellowgreen");

3.	将渐变对象设为填充色

	context.fillStyle = gradient;

4.	通过fillRect画一个矩形

	context.fillRect(100, 100, 200, 280);

径向渐变

1. 创建渐变对象

    //内圆

    var c1 = {x: 260, y: 160, r: 0};

    //外圆

    var c2 = {x: 300, y: 200, r: 120};

    var gradient = context.createRadialGradient(c1.x, c1.y, c1.r, c2.x, c2.y, c2.r);

2.	填色

    gradient.addColorStop(0, "red");

    gradient.addColorStop(0.3, "yellow");

    gradient.addColorStop(0.6, "green");

    gradient.addColorStop(1, "orange");

3.	将渐变对象设为填充色

	context.fillStyle = gradient;

4.	画圆并填充

    context.arc(c2.x, c2.y, c2.r, 0, 2*Math.PI);

    context.fill();

阴影

//和css3相比， 阴影只能设一个， 不能设内阴影

//水平偏移， 垂直的偏移， 模糊程度， 阴影的颜色

//设置阴影的参数

context.shadowOffsetX = 10;

context.shadowOffsetY = 10;

context.shadowBlur = 10;

context.shadowColor = "yellowgreen";

//画一个矩形

context.fillStyle = "red";

context.fillRect(100, 100, 300, 200);

文字

//绘制文字

//text就是要绘制的文字， x， y就是从什么地方开始绘制

context.strokeText("text", x, y)

context.font = "60px 微软雅黑";

context.strokeText("hello, world", 100, 100);

// context.fillText("hello, world", 100, 100);

文字的对齐方式

//垂直方向

context.textAlign = "left"; //left,right,center，默认是left

//水平方向

context.textBaseline = "middle"; //top,middle,bottom,默认top

图片绘制

var image = new Image();

image.src = "./img/gls.jpg";

1.	3参数

	image.onload = function () {

        context.drawImage(image, 100, 200);

    }

2.	5参数

	//图片绘制5参模式（缩放模式）, 就是将图片显示在画布上的某一块区域（x, y, w, h）,如果这个区域的宽高和图片不一至，会被压缩或放大

	image.onload = function () {

	    context.drawImage(image, 100, 100, 100, 100);

	}

3.	9参数

	/*

        参数的解释：

        image： 就是大图片本身

        中间的四个参数， 代表从图片的150， 0的位置，截取 150 * 200的一块区域

        后面的四个参数， 将刚才截取的小图， 显示画布上 100， 100， 150， 200的这个区域

     */

	context.drawImage(image, 150, 0, 150, 200,  100, 100, 150, 200);

例子：图片放大器

<script>

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

    var context = canvas.getContext("2d");

    //1. 加载图片

    var image = new Image();

    image.src = "./img/gls.jpg";

    image.onload = function () {

        //1. 先把大图画在右上角

        context.drawImage(image, 0, 0, 150, 100);

        //创建一个矩形的路径

        context.rect(0, 0, 150, 100);

        //2. 判断当前鼠标是否hover到上面的图片上了

        canvas.onmousemove = function (event) {

            //原图和左上角的图的比例是3： 1

            var x = event.offsetX;

            var y = event.offsetY;

            //当前 x， y这个点的位置，是否在玻璃纸上的路径的区域的内部

            if (context.isPointInPath(x, y) == true) {

                console.log("在内部");

                x = x * 3 - 20;

                y = y * 3 - 20;

                //每一次在画之前，先把之前画的擦除

                //某300， 200， 300， 200这个区域的东西全部擦除

                context.clearRect(300, 200, 300, 200);

                //从x， y这个点，截取40*40的局部小图，显示在图布， 300， 200， 80， 80这个区域，就形成了一个放大的效果

                context.drawImage(image, x, y, 40, 40, 300, 200, 120, 120);

            }

    }

</script>

清除

context.clearRect(300, 200, 300, 200);

缩放

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

var context = canvas.getContext("2d");

context.fillRect(300, 200, 100, 100);

context.scale(0.5, 0.5);

context.fillRect(300, 200, 100, 100);

平移

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

var context = canvas.getContext("2d");

context.fillRect(0, 0, 100, 100);

context.translate(300, 200);

context.fillRect(0, 0, 100, 100);

旋转

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

var context = canvas.getContext("2d");

context.moveTo(20, 0);

context.lineTo(100, 0);

context.stroke();

context.rotate(30/180*Math.PI);

context.beginPath();

context.moveTo(20, 0);

context.lineTo(100, 0);

context.stroke();

动画

function draw() {

	//清空画布

    context.clearRect(0, 0, canvas.width, canvas.height);

	window.requestAnimationFrame(draw);

}

draw();

save、restore

//save保存， restore恢复， 还原

//save的作用，是把context的当前的状态，保存起来;

//restore是把context最近一次保存的状态还原

demo:

	context.fillStyle = "red";

    context.strokeStyle = "blue";

    context.shadowColor = "cyan";

    //把当前的context整个保存一份

    context.save(); //就会把当前的context整个保存一份

    context.fillRect(100, 100, 100, 100);

    context.fillStyle = "green";

    context.fillRect(300, 200, 100, 100);

    //把最近保存的那个context直接拿过来用

    context.restore();

    context.fillRect(500, 300, 100, 100);

巴特西

canvas杂记

canvas杂记

canvas标签

画线api

设置颜色api

关于路径填充问题-非零填充原则

绘制矩形api

绘制圆型api

线条api

线性渐变

径向渐变

阴影

文字

文字的对齐方式

图片绘制

清除

缩放

平移

旋转

动画

save、restore

最新文章

热门文章