canvas二三事之签名板与视频绘制

今天,不知道怎么的就点开了语雀,然后就看到了《HTML5 Canvas 教程》,开始了canvas的研究(学习)之旅。

首先,想到的第一个东西就是签名板,上代码:

<canvas id="canvas" width="600" height="600"></canvas>
<button onclick="clearCtx()">clear</button>
var canvas = document.querySelector(‘#canvas‘);
var ctx = canvas.getContext(‘2d‘);
var canWrite = false; //是否可以写的状态

canvas.addEventListener(‘mousedown‘, function(e){
    canWrite = true;
    ctx.beginPath();
    ctx.moveTo(e.offsetX, e.offsetY);
    ctx.lineTo(e.offsetX, e.offsetY);
    ctx.lineWidth = 5;
    ctx.lineCap = ‘round‘
    ctx.stroke();
})

canvas.addEventListener(‘mousemove‘, function(e){
   //这里必须是按下鼠标再移动的时候才能划线
    if(canWrite){
        ctx.lineTo(e.offsetX, e.offsetY);
    ctx.stroke();
    }
})

canvas.addEventListener(‘mouseup‘, function(e){
    canWrite = false;
})

canvas.addEventListener(‘mouseleave‘, function(e){
    canWrite = false;
})

//清除画布
function clearCtx(){
    ctx.clearRect(0, 0, canvas.width, canvas.height)
}

大致方法就是这样,移动端的话修改一下对应的事件就行了,这是今天的第一个demo。

然后继续学习,看到了createPattern填充纹理,这里canvas填充图片,这里也是语雀的一个例子:

<canvas id="canvas" width="600" height="600"></canvas>
var canvas = document.querySelector(‘#canvas‘);
var ctx = canvas.getContext(‘2d‘);

var img = new Image();
img.src = "http://airing.ursb.me/edu8-1.jpg";
img.onload = function(){
    var pattern = ctx.createPattern(img, "repeat");
    ctx.fillStyle = pattern;
    ctx.fillRect(0,0,600,600);
}

emmm,真香!

然后我前几天看到了canvas绘视频,刚好createPattern第一个参数也可以是video对象,索性就探索了一波,然后碰壁了。。。

大概意思就是createPattern它绘画的是源视频,而源视频是1920*1080,目标canvas对象的尺寸是600*600,所以绘画出来就只能画到源视频的一部分,让人头痛。

然后采用的第二种方案,drawImage!完美。

<canvas id="canvas" width="600" height="600"></canvas>
<button onclick="playVideo()">play</button>
<button onclick="stopVideo()">stop</button>
//获取canvas对象
var canvas = document.querySelector("#canvas");
//获取context
var ctx = canvas.getContext("2d");
//画布开始的x,y坐标
var startX = 0;
var startY = 0;
//创建video对象
var video = document.createElement("video");
//这里借用阿里云的视频
video.src = "https://videocdn.taobao.com/oss/taobao-ugc/c70d06b360964d9a8500f85213ea7238/1483532956/video.mp4";
video.preload = "preload";
video.autoplay = "autoplay";
video.muted = true;
video.loop = true;

var interval = null;
var videoWidth = canvas.width;
var videoHeight = canvas.height;
//视频加载完成获取视频原始宽高
video.onloadeddata = function() {
    //做视频缩放
    if (video.videoWidth > canvas.width || video.videoHeight > canvas.height) {
        if (video.videoWidth / video.videoHeight > canvas.width / canvas.height) {
            videoWidth = canvas.width;
            videoHeight = Math.round(
                canvas.width * (video.videoHeight / video.videoWidth)
            );
            startX = 0;
            startY = (canvas.height - videoHeight) / 2;
        } else {
            videoWidth = Math.round(
                canvas.height * (video.videoWidth / video.videoHeight)
            );
            videoHeight = canvas.height;
            startX = (canvas.width - videoWidth) / 2;
            startY = 0;
        }
    }
    //根据缩放设置视频新的宽高
    video.width = videoWidth;
    video.height = videoHeight;
};

function playVideo() {
    //画视频
    ctx.drawImage(video, startX, startY, video.width, video.height)
    interval = requestAnimationFrame(playVideo)
    video.play();
}

function stopVideo() {
    cancelAnimationFrame(interval)
    interval = null;
}

codepen地址:https://codepen.io/anon/pen/VNNOyw

不由得感叹一句:啊,canvas,真香!

原文地址:https://www.cnblogs.com/xuejiangjun/p/10796773.html

时间: 2024-10-03 07:40:21

canvas二三事之签名板与视频绘制的相关文章

canvas二:绘制圆和其他曲线

1.绘制圆 绘制圆是canvas里面不可缺少的功课,而且绘制圆在canvas中的用处很多,好嘞,开扯 绘制圆需要用到arc这个方法: arc(X坐标,Y坐标,半径,起始弧度,结束弧度,旋转方向): 弧度与角度的关系:弧度 = 角度*Math.PI/180: 旋转方向:true(逆时针),false(顺时针),默认为顺时针: 实例:我想画一个半圆,先里一下思路,首先我们需要一个区域,也就是绘制路径,即beginPath, 然后我们再需要定义一个开始的绘制点,即moveTo,之后在进行绘圆操作,那么

关于线性模型你可能还不知道的二三事(二、也谈民主)

目录 1 如何更新权值向量?2 最小均方法(LMS)与感知机:低效的民主3 最小二乘法:完美的民主4 支持向量机:现实的民主5 总结6 参考资料 1 如何更新权值向量? 在关于线性模型你可能还不知道的二三事(一.样本)中我已提到如何由线性模型产生样本,在此前提下,使用不同机器学习算法来解决回归问题的本质都是求解该线性模型的权值向量W.同时,我们常使用线性的方式来解决分类问题:求解分隔不同类别个体的超平面的法向量W.不论回归还是分类,都是求解向量W,而求解的核心思想也英雄所见略同:向量W倾向于指向

Android_2D绘图的学习Paint,Canvas(二)

前言 上一节,学会了Paint,Canvas的基本用法后,这一节,学习Paint的高级用法.还没看过上一节的请点击这里:Android_2D绘图的学习Paint,Canvas(一). 一,文字的绘制 在做UI的时候,常常会绘制文字,Canvas绘制文字时,主要考虑到字体的宽度和高度问题.字体的宽度比较好理解,这里我们主要考虑一下字体的高度. 先看一张图,网上搜的: 这里说明了在安卓中绘制字体时对于高度的划分:top,ascent,baseLine,descent,bottom.有点类似我们刚开始

初识zabbix需了解的二三事

简介 zabbix是一个基于WEB界面的提供分布式系统监视以及网络监视功能的企业级的开源解决方案: zabbix能监视各种网络参数,保证服务器系统的安全运营:并提供灵活的通知机制以让系统管理员快速定位/解决存在的各种问题: 监控平台的组成 数据采集 --> 数据存储 --> 数据展示和分析 --> 报警 常见监控实现方案对比 cacti 优点:利用rrdtool绘图,图形美观: 缺点:报警功能薄弱,不适合大规模监控场景: nagios 优点:报警功能强大: 缺点:只关心正常与否的状态,数

Ubuntu12.04 Version 安装二三事

Ubuntu12.04 Version 安装二三事 安装输入法 因为是全英的系统,所以,中文输入法是一定要装的!!! 介绍一:(和我电脑配置很像,from http://vb2005xu.iteye.com/blog/1748575) Ubuntu上的输入法主要有小小输入平台(支持拼音/二笔/五笔等),Fcitx,Ibus,Scim等.其中Scim和Ibus是输入法框架. 在Ubuntu的中文系统中自带了中文输入法,通过Ctrl+Space可切换中英文输入法.这里我们主要说下Ubuntu英文系统

iOS7下滑动返回与ScrollView共存二三事

[转载请注明出处] = =不是整篇复制就算注明出处了亲... iOS7下滑动返回与ScrollView共存二三事 [前情回顾] 去年的时候,写了这篇帖子iOS7滑动返回.文中提到,对于多页面结构的应用,可以替换interactivePopGestureRecognizer的delegate以统一管理应用中所有页面滑动返回的开关,比如在UINavigationController的派生类中 1 //我是一个NavigationController的派生类 2 - (id)initWithRootV

转手项目二三事

程序员下班之余除了自己充电学习,一般都期待搞个私活做做,这样的方式给自己加班仿佛有了一层光环:自动回血又加经验.我也是今年才开始做一些个人的小案子,都是朋友的朋友介绍的,没什么价.只是这样的过程还是比较好的:慢慢建立自己的客户,提高自己的代码效率,驱动你去研究一些你不熟悉东西,了解别的行业,积累人脉关系.但遇到转手项目这种案子 营养不多,麻烦却不少. 上次一个朋友介绍一个接口的小差,大概一共就是二十几个方法,还没开始做就打了1000元给我.当时心想:写几个方法给这么多,太多了吧.按照他说的 一两

Linux基础回顾(2)——Linux系统分区二三事

问题来自Linux教材,答案自我整理难免会有不足之处.这是我Linux期末的总结 1. 一块硬盘上可以有几种类型的分区?各自可以有多少个?(各个分区能安装操作系统吗?) 硬盘分区有三种类型的分区:主分区,扩展分区,逻辑分区:一个硬盘最多能划分4个主分区,或者3个主分区加上一个扩展分区,扩展分区上可以划分多个逻辑分区(最多20个).能安装操作系统. 2.用户能否在安装过程中创建扩展分区呢? 分区工具在文件系统类型中没有提供扩展(extended)分区类型,即用户不能根据需要不能手工创建扩展分区.安

老曹眼中的研发管理二三事

这是在gitchat上的第一次分享,中生代联手gitchat在做研发管理的专题活动,作为先锋,抛砖引玉. 关于管理,必然会谈到业界先贤德鲁克先生对管理的定义. 管理就是界定企业的使命,并激励和组织人力资源去实现这个使命.界定使命是企业家的任务,而激励与组织人力资源是领导力的范畴,二者的结合就是管理. 这是对企业管理的阐述,管理是一种实践,其本质不在于'知'而在于'行':其验证不在于逻辑,而在于成果:其唯一权威就是成就. 而我们多数人不是企业家,更多是基层的管理者,面对的一个或几个小型的组织.尤其