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>
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

经典面试题(讨论canvas与svg的区别)

讨论关于canvas和svg的区别。首先canvas是html5提供的新元素,而svg存在的历史要比canvas久远,已经有十几年了。svg并不是html5专有的标签,最初svg是用xml技术(超文本...

Canvas基础知识总结之一

canvas的HTML语法: Canvas not supported 上面这句代码中内容部分所含的文本,这种文本的叫法“后备内容”,浏览器在不支持canvas元素的时候才会显示方该内容。canvas...

ng-show ; ng-hide

Toggle Menu age:{{name.age}}   where:{{name.where}} var myModule = angular.modu...

背包问题

NYOJ 水题,今天不想复习了,刷刷题,熟悉下基本的数据结构和算法把 #include #include #include #include using na...

html5学习canvas代码

  • 2015年09月19日 23:26
  • 495KB
  • 下载

HTML5 Canvas学习

  • 2015年09月01日 10:34
  • 572B
  • 下载

html5 canvas 学习笔记

var cvs = document.getElementById("2d"); var ctx = cvs.getContext("2d"); 关于画弧 arc函数的使用,其将弧的起始点...
  • lychaox
  • lychaox
  • 2013年03月16日 21:38
  • 1025

html5 canvas 学习笔记

getContext("2d")  对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 fillStyle属性可以是CSS颜色,渐变,或图案 fillRe...
  • amberla
  • amberla
  • 2015年09月24日 11:37
  • 89

Html5 Canvas初探学习笔记(12) -图片裁减和调整

小满(bill man)个人原创,欢迎转载,转载请注明地址,小满(bill man)的专栏地址http://blog.csdn.net/bill_man 上一篇讲了图片的两种操作,读入和导出,而...

画板社交工具开发分享——HTML5 canvas控件、PHP、社交分享学习(二)

本小节主要记录下前端页面相关功能的实现。绘图功能主要是利用HTML5 的canvas控件来实现,利用JS来控制鼠标操作,实现绘图。同时利用下拉列表控件来选择不同的工具、不同的画笔颜色、不同的画笔宽度功...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:html5--canvas学习
举报原因:
原因补充:

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