html5--canvas学习

原创 2016年05月30日 22:02:47

HTML5 canvas 元素用于图形的绘制,canvas 标签只是图形容器,您必须使用脚本(通常是JavaScript)来绘制图形。
1.创建一个画布

//设置大小和边框
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>

2.使用JavaScript来绘制图像
这里写图片描述

<script>
var c=document.getElementById("myCanvas");
//创建 context 对象,getContext("2d") 对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
var ctx=c.getContext("2d");
//fillStyle属性可以是CSS颜色,渐变,或图案
ctx.fillStyle="#FF0000";
//在画布上绘制 150x75 的矩形,从左上角开始 (0,0)。
ctx.fillRect(0,0,150,75);
</script>

3.路径
这里写图片描述

//绘制线条
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);//线条开始的坐标
ctx.lineTo(200,100);//线条结束的坐标
ctx.stroke();

这里写图片描述

//绘制圆形
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();

这里写图片描述

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";//设置字体
ctx.fillText("Hello World",10,50);//实心文本
ctx.strokeText("Hello World",10,50);//空心文本

4.把一副图像放置到画布上

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);

5.
这是一段实时在画布上显示视频的代码,像两个窗口在同时播放。
第一个窗口是实时的播放一段视频。
第二个窗口是没20毫秒在画布绘图一次,看起来也是一段连续的视频播放,当暂停或者视频结束时,取消定时绘图。

<!DOCTYPE html>
<html>
<body>

<p>要使用的视频:</p>

<video id="video1" controls width="270" autoplay>
<source src="video1.mp4" type='video/mp4'>
</video>

<p>画布(每 20 毫秒,代码就会绘制视频的当前帧):</p>

<canvas id="myCanvas" width="270" height="135" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var v=document.getElementById("video1");//获取视频
var c=document.getElementById("myCanvas");//创建画布
ctx=c.getContext('2d');
v.addEventListener('play', function() {var i=window.setInterval(function() {ctx.drawImage(v,0,0,270,135)},20);},false);//如果是播放,每20毫秒绘图一次
v.addEventListener('pause',function() {window.clearInterval(i);},false);//视频暂停,取消定时绘图
v.addEventListener('ended',function() {clearInterval(i);},false);  //视频结束,取消定时绘图
</script>
</body>
</html>
版权声明:本文为博主原创文章,未经博主允许不得转载。

为什么说深度学习和机器学习截然不同?

[转] http://www.leiphone.com/news/201612/ivLxiAXyHTCqGu0K.html 导语:Andreesen说“软件正在占领全世界”,那么深度...
  • xiangz_csdn
  • xiangz_csdn
  • 2017年01月05日 08:51
  • 11488

Oracle学习——扫盲篇

关于Oracle数据库、oracle数据库实例、SID、表空间、用户、表,这些都是什么,他们之间有什么关系,它们又是如何创建的!最后关于Oracle的使用总结,首先安装oracle数据库软件、然后创建...
  • zwk626542417
  • zwk626542417
  • 2014年09月17日 14:47
  • 6765

深度学习如何设置学习率

学习率是深度学习中的一个重要的超参,如何调整学习率是训练出好模型的关键要素之一。在通过SGD求解问题的极小值时,梯度不能太大,也不能太小。太大容易出现超调现象,即在极值点两端不断发散,或是剧烈震荡,总...
  • mao_feng
  • mao_feng
  • 2016年10月23日 16:33
  • 9074

增强学习系列之(一):增强学习介绍

增强学习介绍
  • superCally
  • superCally
  • 2017年01月27日 09:38
  • 2578

【机器学习-斯坦福】学习笔记13 在线学习(Online Learning)

原题目叫做The perception and large margin classifiers,其实探讨的是在线学习。这里将题目换了换。以前讨论的都是批量学习(batch learning),就是给...
  • u012409883
  • u012409883
  • 2013年12月03日 09:55
  • 4526

一张图看懂AI、机器学习和深度学习的区别

AI(人工智能)是未来,是科幻小说,是我们日常生活的一部分。所有论断都是正确的,只是要看你所谈到的AI到底是什么。   例如,当谷歌DeepMind开发的AlphaGo程序打败韩国职业围棋高手Lee...
  • dukai392
  • dukai392
  • 2017年04月20日 16:54
  • 9748

深度学习进阶之路 - 从迁移学习到强化学习

一. 深度学习及其适用范围        大数据造就了深度学习,通过大量的数据训练,我们能够轻易的发现数据的规律,从而实现基于监督学习的数据预测。                 没错,这里要强调的...
  • linolzhang
  • linolzhang
  • 2017年06月06日 23:17
  • 4789

机器学习之深度强化学习

机器学习之深度强化学习
  • qq_26609915
  • qq_26609915
  • 2016年03月21日 15:29
  • 3021

迁移学习资源整理

杨强:http://home.cse.ust.hk/~qyang/ Sinno Jialin Pan: http://www1.i2r.a-star.edu.sg/~jspan/
  • researchstep
  • researchstep
  • 2015年09月07日 09:16
  • 2800

Deep Learning(深度学习)学习笔记整理系列之(一)

Deep Learning(深度学习)学习笔记整理系列 zouxy09@qq.com http://blog.csdn.net/zouxy09 作者:Zouxy version 1.0  20...
  • zouxy09
  • zouxy09
  • 2013年04月08日 23:35
  • 778336
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:html5--canvas学习
举报原因:
原因补充:

(最多只允许输入30个字)