JS canvas总结

最新推荐文章于 2024-06-08 10:30:27 发布

litchi dream

最新推荐文章于 2024-06-08 10:30:27 发布

阅读量1.4k

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/ladream/article/details/108182992

版权

JS 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

canvas

一、基本用法

**< canvas width=“200” height=“200” >< / canvas>

<body οnlοad="draw()">
	<canvas id="canvas" width="200" height="200" >
		浏览器不支持才显示这段文字
	</canvas>
	
	<script>
		function draw(){
			var canvas=document.getElementById("canvas");
			if(canvas.getContext)
			{
				var ctx=canvas.getContext('2d');
				语句；
			}
			else
			{
			}
		}
	</script>
< /body>

getContext：用来看浏览器是否支持canvas ，支持了里面的代码才起作用，不支持就显示else里面的代码.

二、2D上下文

1、填充和描边

（1）fillStyle 和 strokeStyle：该属性写的是绘制的颜色。

（2）fillRect 和 strokeStyle：最后绘制矩形
fillRect(x,y,width,height)：距离左上角的上边 x px，左边 y px，width,height

clearRect：清除矩形

			var canvas=document.getElementById("canvas");
			if(canvas.getContext)
			{
				var ctx=canvas.getContext('2d');

				ctx.fillStyle="red";
				ctx.fillRect(30,30,100,100);
			}

2、绘制路径

变量 . beginPath()：开始绘制路径
==arc（x,y,radius,startAngle,EndAngle,是否按逆时针方向计算）:==开始角度为0时时三点钟方向，最后一个值为true或false,true：逆时针，false:顺时针
moveTo（x,y）：直接移动到(x,y)，不绘制路径
lineTo(x,y)：绘制直线到（x,y）
’
画完之后，可以用如下属性：
closePath()：末尾连接到起点
fill()：用fillStyle填充它
stroke()：用strokeStyle描边
clip()：在路径上创建一个剪切区域

3、绘制文本（fillText、strokeText）

fillText(要绘制的文本字符串，x，y，可选的最大像素宽度)；


var ctx=canvas.getContext('2d');

if(ctx.strokeText)
{
	ctx.font=" bold 15px Arial";
	//textAlign="start,end,left,right,center(建议用前两个值)"
	ctx.textAlign="center";
	//textBaseline="top,hanging,middle,alphabetic,ideograohic,bottom"
	ctx.textBaseline="middle";
	ctx.fillText("12",100,20);
}
else{
	alert("你的浏览器不支持strokeText");
}

在这里插入图片描述
measureText()：接受一段字符串，返回的是字符串的宽度

4、变换（通过上下文变换，把处理后的图像绘制在画布上）

方法：
（1）rotate（角度）：围绕原点旋转这么多角度
（2）scale（scaleX,scaleY）：缩放图像，在X方向乘以scaleX,在Y方向乘以scaleY
（3）translate(x,y)：将坐标原点移动到x,y
（4）transfrom（值）：直接改变矩阵
在这里插入图片描述

window.onload = function(){
    var drawing = document.getElementById("drawing");
            
    //make sure <canvas> is completely supported
    if (drawing.getContext){
            
    var context = drawing.getContext("2d");
                
    //start the path
    context.beginPath();
                
    //draw outer circle
    context.arc(100, 100, 99, 0, 2 * Math.PI, false);
                
    //draw inner circle
    context.moveTo(194, 100);
    context.arc(100, 100, 94, 0, 2 * Math.PI, false);

    //move center to (100,100)
    context.translate(100, 100);
    context.rotate(1);
                
     //draw minute hand
     context.moveTo(0,0);
     context.lineTo(0, -85);
                
     //draw hour hand
     context.moveTo(0, 0);
     context.lineTo(-65, 0);
                
      context.stroke();
            }                
};

5、绘制图像

变量 . drawImage（图片，x,y,width,height）；

6、阴影

shadowColor：阴影颜色
shadowOffsetX：x轴的偏移量
shadowOffsetY：y轴的偏移量
shadowBlur：模糊的像素
在这里插入图片描述

context.shadowOffsetX = 5;
context.shadowOffsetY = 5;
context.shadowBlur    = 4;
context.shadowColor   = "rgba(0, 0, 0, 0.5)";            
            
//draw a red rectangle
context.fillStyle = "#ff0000";
context.fillRect(10, 10, 50, 50);
            
//draw a blue rectangle
context.fillStyle = "rgba(0,0,255,1)";
context.fillRect(30, 30, 50, 50);

7、渐变

（1）创建线性渐变

变量 . createLinearGradient（起点的x,起点的y,终点的x,终点的y）；：创建渐变对象
addColorStop（0-1一个数，“颜色”）；：添加颜色
然后用 fillStyle=grandient;
最后 fillRect(x,y,width,height);
在这里插入图片描述

gradient = context.createLinearGradient(30, 30, 70, 70);

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

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

（2）创建径向渐变
createRadiaGradient(圆心1x，圆心1y，半径1，圆心2x，圆心1y，半径2);
在这里插入图片描述

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);

8、模式（重复的图像）

变量 . createPattern（图片，“repeat”）;

9、使用图像数据

. getImageData（x,y,width,height）;

10、合成

globalAlpha和globaCompositeOperation
（1）globalAlpha：是一个介于0~1之间的数，表示的是透明度
（2）globaCompositeOperation：表示会之后的图像怎么与先绘制的图像结合。

值：

source-over：默认。在目标图像上显示源图像。
source-atop ：在目标图像顶部显示源图像。
source-in：在目标图像中显示源图像。
source-out ：在目标图像之外显示源图像。
destination-over ：在源图像上方显示目标图像。
destination-atop ：在源图像顶部显示目标图像。
destination-in ：在源图像中显示目标图像。
destination-out ：在源图像外显示目标图像。
lighter：显示源图像 + 目标图像。
copy ：显示源图像。忽略目标图像。
xor ：使用异或操作对源图像与目标图像进行组合。
这里是引用

三、WebGL

WebGL是针对Canvas的3D上下文。

1、类型化数组

1、视图
ArrayBuffer（数组缓冲类型），最常见的是DataView
DataView（ArrayButter,字节偏移量，要选择的字数）；
2、WebGL上下文
clearColor()：在WebGL之前，一般都会用某种实色清除< canvas>,该属性接受四个参数，分别为红、绿、蓝、透明度
3、视口与坐标
viewport（x,y,width,height）;
4、缓冲区
创建缓冲区：createBuffer();
5、错误
WebGL一般不会报错，知道是否报错，可以用gl . getError()
6、着色器
有顶部着色器和片段着色器。使用GLSL编写
7、纹理
调用gl . createTexture（）

litchi dream

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JS canvas总结

canvas一、基本用法**< canvas width=“200” height=“200” >< / canvas><body οnlοad="draw()"> <canvas id="canvas" width="200" height="200" > 浏览器不支持才显示这段文字 </canvas> <script> function draw(){ var canvas=document.getEl
复制链接

扫一扫