Canvas基础入门（基本绘图，水印，弹幕，视频和图像绘制）

---

前言

HTML5新增的<canvas>元素，负责在页面中设定一个区域，之后可以通过JS脚本动态地绘图。相较于XML图像绘制，性能较高，但在放大后会出现失真。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、基本线条绘制

先讲讲绘图的基本结构：

1. 在页面中需要先定义出<canvas>对象，并且指定其宽高各占多少像素。
2. 获取canvas对象及其画笔myCanvas.getContext('2d')
3. 声明绘制的起止并指定需要经过的点
4. 设置填充内容并填充 fill(); & fillStyle;
5. 设置线条样式并执行绘画 lineWidth/lineCap... & ctx.stroke();

1.绘制线条

代码如下（示例）：

	var canvas = document.querySelector("#canvas01");
	var ctx = canvas.getContext('2d');
	ctx.beginPath(); //声明开始绘制
	ctx.moveTo(50,50);
	ctx.lineTo(300,300);
	ctx.closePath(); //声明结束绘制
	
	ctx.fillStyle = "aquamarine"; //填充的颜色
	ctx.fill();
	
	ctx.lineWidth = 10; //线宽
	ctx.lineCap = "round"; //起止点线条样式
	ctx.lineJoin = "miter"; //线的拐角
	ctx.miterLimit = 2; //裁剪角 1 2 3三个等级,3最尖
	ctx.strokeStyle = "red";
	ctx.stroke();

2.绘制圆

代码如下（示例）：

	//起始位置,半径,从几度到几度,true是逆时针
	ctx.arc(300,300,100,0,Math.PI,true);
	ctx.fillStyle = "#02A6B5";
	ctx.fill();
	ctx.stroke();

二、弹幕和视频

1.弹幕

关于动画效果： 对于60HZ/S刷新率的显示器来说，16ms/帧的速度是最合适的 （1000 ms / 60 ≈ 16）。

代码如下（示例）：

	//弹幕
	var xAxis = 600;
	setInterval(function(){
    
    
		ctx.clearRect(0,0,600,600); //每次绘制前都要清空画布
		xAxis -= 3;
		if(xAxis < -100){
    
     //100是字体的长度确定的
			xAxis = 600;
		}
		ctx.fillText("hello word!",xAxis,100); //实体
		ctx.strokeText("hello word!",xAxis,200); //镂空
	},16); 

2.视频

代码如下（示例）：

	//绘制视频
	var video = document.querySelector("#video"); //需要在页面中加入video标签
	var intervalId;
	video.onplay = function(){
    
    
		document.getElementById("video").volume = 0.01; //调节音量（数据 0.0~1.0）
		intervalId = setInterval(function(){
    
     //获取间隔id用于暂停
			ctx.clearRect(0,0,800,600); //去除黑色背景
			ctx.fillRect(0,0,800,600); //设置黑色背景
			ctx.drawImage(video,0,75,800,450); //设置视频大小，p1视频对象，p2 p3每帧图片左上角定位位置，p3 p4图片大小
		},16);
	}
	video.onpause = function(){
    
    
		clearInterval(intervalId);
	}

---

三、图像与水印

1.图像+水印

注意的一点，必须要在图片加载完成之后再绘图。

扫描二维码关注公众号，回复： 12724521 查看本文章

代码如下（示例）：

	//绘制图像
	var img = new Image();
	img.src = "img/lbx.png";
	img.onload = function(){
    
     //图片数据加载完毕后再显示图像
		ctx.drawImage(img,10,10);
		ctx.font = "50px 微软雅黑";
		ctx.fillText("xiaoj",400,600);
	}