canvas基本要点

最新推荐文章于 2024-08-18 20:11:48 发布

JinmyHe

最新推荐文章于 2024-08-18 20:11:48 发布

阅读量205

点赞数

CC 4.0 BY-SA版权

分类专栏： web前端-动画图形文章标签： canvas

本文链接：https://blog.youkuaiyun.com/weixin_42659625/article/details/82505522

web前端-动画图形专栏收录该内容

19 篇文章

订阅专栏

本文深入探讨了HTML5的canvas元素，从监听器的使用、封装函数、将canvas添加到HTML页面，到检测浏览器支持，获取上下文，以及2D上下文的状态，如变换矩阵、裁切区域和各种上下文属性。还提到了图像加载、调试方法以及Canvas对象的相关知识。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.监听器 addEventListener()

有3个参数：

事件load

事件处理器函数：eventWindowLoaded()

useCaputre: true 或false

下用是用来测试window是否加载完毕的最终代码：

		window.addEventListener("load",eventWindowLoaded,false);
		function eventWindowLoaded(){
			canvasApp();
		}

		//另外也可以为Load事件设置事件监听器
		window.onload = function(){
			canvasApp();
		}
		//或者使用以下代码
		window.onload = function(){
			canvasApp();
		}

2.封装函数的示例代码

		function canvasApp(){
			drawScrenn()
			//...
			function drawScrenn(){
				//...
			}

		}

3.canvas添加到HTML页面中

	<canvas id="canvasOne" width="600" height="400">you draw</canvas>

4.检测浏览器是否支持canvas

		if(!theCanvas || !theCanvas.getContext){
			return;
		}

5.获得上下文

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

6.drawScreen函数

		context.fillstyle = "#fff";//设置颜色
		context.fillRect(0,0,500,300);//创建矩形
		context.font = "20px _sans";//设置字体
		context.textBaseline = "top"; //设置字体的对齐方式
		context.fillText("Hello world");//设置文本

7.显示图像之前，需要等待图像加载完毕

		//3个参数，image对象，x坐标，y坐标
		var helloWorldImage = new Image();
		helloWorldImage.src = "helloworld.gif";
		helloWorldImage.onload = function (){
			context.drawImage(helloWorldImage,160,130)
		}

8.用console.log调试

		var Debugger = function (){};
		Debugger.log = function (message){
			try{
				console.log(message);
			} catch(exception) {
				returnl
			}
		}

9.2D上下文及其当前状态

通过getContext()方法获得当前2D上下文对象。状态包括：

1.变换矩阵：缩放，旋转，变换以及平移的方法

2.裁切区域：通过clip()方法创建

3.上下文属性：

strokeStyle,fillStyle,globalApha,lineWidth,lineCap,line,Join,miterLimit,shadowOffsetX,shadowOffSetY,shadowBlur,shaowColor,global,CompositeOpeation,font,textAlign,textBaseline

10.HTML5 Canvans 对象

var theCanvans = document.createElement("canvas");