canvas

简介

html5中canvas标签用于绘制图像。不过canvas标签本身没有绘制能力，是图形的容器，需要用脚本完成绘制。getContext()方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。getContext(“2d”) 对象属性和方法，可用于在画布上绘制文本、线条、矩形、圆形等等。
画布方法属性查看：https://www.runoob.com/tags/ref-canvas.html

canvas三要素

id:作为唯一的标识
width:画布内容宽度的像素大小（与style的宽度和高度是有区别）
height:画布内容高度的像素大小
canvas仅仅只是1个画布标签，要绘制内容，必须用js绘制

js简易绘制实例

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title></head><body><canvas id="canvas1" width="600" height="600">这里的内容，正常的画布是不实现的，你的浏览器不支持canvas</canvas><script type="text/javascript">//1找到画布对象var canvas1 = document.querySelector("#canvas1")console.log([canvas1])//2上下文对象(画笔)，2维平面绘制var ctx = canvas1.getContext("2d")console.log(ctx)//3绘制路径//x轴y轴坐标，长宽ctx.rect(50,50,300,300)//4填充ctx.fillStyle = "aqua";ctx.fill()//5描边,渲染路径ctx.lineWidth = 20ctx.strokeStyle = "salmon"ctx.stroke()</script></body>
</html>

结果：

绘制路径

线条样式

属性	描述
lineCap	设置或返回线条的结束端点样式。
lineJoin	设置或返回两条线相交时，所创建的拐角类型。
lineWidth	设置或返回当前的线条宽度。
miterLimit	设置或返回最大斜接长度。

例子：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title></head><body><canvas id="canvas1" width="600" height="600"></canvas><script type="text/javascript">var canvas1  = document.querySelector("#canvas1")var ctx = canvas1.getContext('2d')//设置开始路径ctx.beginPath()//设置绘制的起始点ctx.moveTo(50,50)//设置经过某个位置ctx.lineTo(50,300)//设置经过某个位置ctx.lineTo(300,100)//设置经过某个位置ctx.lineTo(300,250)//设置结束路径ctx.closePath()console.log(ctx)//绘制路径ctx.lineCap = "round"//起始路径的线段边缘设置为圆角/* ctx.lineJoin = "round" */ctx.miterLimit = 3 //设置或返回最大斜接长度。ctx.strokeStyle = "aqua"ctx.lineWidth = 20ctx.stroke()</script></body>
</html>

结果：

绘制圆

例子：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><canvas id="canvas1" width="600" height="600"></canvas><script type="text/javascript">var canvas1 = document.querySelector("#canvas1")var ctx = canvas1.getContext('2d')//横纵坐标、r、角度、默认为false(可不写),是顺时针,true为逆时针,是否是逆时针ctx.arc(300,300,100,0,2*Math.PI,false)ctx.fillStyle = "bisque";ctx.fill()ctx.stroke()</script></body>
</html>

结果：

绘制文本

弹幕的例子：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><canvas id="canvas1" width="600" height="600"></canvas><script type="text/javascript">var canvas1 = document.querySelector("#canvas1")var ctx = canvas1.getContext('2d')console.log(ctx)ctx.font = "50px 微软雅黑"//设置阴影ctx.shadowBlur = 20;      //阴影的模糊级别。ctx.shadowColor= "rgba(0, 0, 0, 1)";//阴影的颜色。ctx.shadowOffsetX=  10  //阴影与形状的水平距离。ctx.shadowOffsetY= 10  //阴影与形状的垂直距离。var x = 600;setInterval(function(){//清空画布，x y 长 宽ctx.clearRect(0,0,600,600)x-=3;if(x<-100){x = 600;}ctx.fillText("helloworld",x,100)ctx.strokeText("中午吃啥？",x,200)},16)</script></body>
</html>

运行结果：

绘制图像

方法	描述
drawImage()	向画布上绘制图像、画布或视频。

根据不同数量的参数传入会是不同的渲染效果。

 //ctx.drawImage(图片对象，x位置,y位置)//ctx.drawImage(图片对象，x位置,y位置，宽度，高度)//ctx.drawImage(图片对象，图像裁剪的位置x，图像裁剪y的位置，裁剪的宽度，裁剪的高度，放置的x位置,y位置，宽度，高度)

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title></head><body><canvas id="canvas" width="600" height="600"></canvas><script type="text/javascript">var canvas = document.querySelector("#canvas")var ctx = canvas.getContext('2d')//绘制图像//ctx.drawImage(图片对象，x位置,y位置)//ctx.drawImage(图片对象，x位置,y位置，宽度，高度)//ctx.drawImage(图片对象，图像裁剪的位置x，图像裁剪y的位置，裁剪的宽度，裁剪的高度，放置的x位置,y位置，宽度，高度)var img = new Image()img.src = "img/image1.jpg"//图片载入数据再绘制内容img.onload = function(){// ctx.drawImage(img,50,50)}var img2 = new Image()img2.src = "img/image2.jpg"img2.onload = function(){ctx.drawImage(img2,50,0,500,400)ctx.fillText("哈哈哈哈",500,380)//水印}</script></body>
</html>

结果：

绘制视频

利用drawImage()一帧一帧的获取。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><canvas id="canvas" width="800" height="600" style="width:800px;height: 600px;"></canvas><video width="800" height="" src="img/video.mp4" controls="controls"></video><script type="text/javascript">var video = document.querySelector("video")var canvas = document.querySelector("#canvas")var interId;var ctx = canvas.getContext('2d')video.onplay = function(){interId = setInterval(function(){ctx.clearRect(0,0,800,600)ctx.fillRect(0,0,800,600)ctx.drawImage(video,0,70,800,440)ctx.font = "20px 微软雅黑"ctx.strokeStyle = "#999"ctx.strokeText("哈哈哈",50,50)},16)}video.onpause = function(){clearInterval(interId)}</script></body>
</html>

结果：

可以用getImageData(x,y,width,height)来获取图像的信息

图像数字处理

// style中的width和height是画布实际大小，前面的是画布中的分辨率。
<canvas id="canvas" width="800" height="600" style="width: 800px; height: 600px;"></canvas>

一个分析图片的例子，包含getImageData操作和putImageData操作。分析一张神经网络的图。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><link rel="shortcut icon" href="img/bitbug_favicon.ico" /></head><body><!--集合了65000张手写的数字图片784 = 28*28--><!--显示数字图片--><canvas id="c2" width="100" height="100" style="width: 300px;height: 300px;"></canvas><!--显示所有内容的图片--><canvas id="c1" width="784" height="65000"></canvas><script type="text/javascript">var c1 = document.querySelector("#c1")var c2 = document.querySelector("#c2")var c1Cxt = c1.getContext('2d')var c2Cxt = c2.getContext('2d')var img = new Image()img.src = "img/mnist_images.png";img.onload = function(){c1Cxt.drawImage(img,0,0)for(var j=0;j<3;j++){var imgData = c1Cxt.getImageData(0,j,784,1)var imgData2 =  c2Cxt.createImageData(28,28)for(var i= 0;i<784*4;i++){imgData2.data[i] = imgData.data[i]}console.log(imgData2)console.log(imgData)c2Cxt.putImageData(imgData2,0,j*28,0,0,28,28)}}</script></body>
</html>

结果：

canvas绘制时钟

translate移动

例子：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title></head><body><canvas id="canvas" width="800" height="600"></canvas><script type="text/javascript">var canvas = document.querySelector("#canvas")var cxt = canvas.getContext('2d')//移动即是translate,会将画布的整个坐标尺进行移动cxt.translate(300,0)cxt.fillStyle = "deepskyblue"cxt.fillRect(100,100,300,100)cxt.fillStyle = "hotpink"cxt.fillRect(0,0,100,100)</script></body>
</html>

结果：

rotate旋转

例子：

<script type="text/javascript">var canvas = document.querySelector("#canvas")var cxt = canvas.getContext('2d')cxt.fillStyle = "deepskyblue"cxt.fillRect(100,0,300,100)//旋转画布坐标尺cxt.rotate(Math.PI/4)cxt.fillStyle = "deepskyblue"cxt.fillRect(100,0,300,100)</script>

结果：

缩放scale

例子：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title></head><body><canvas id="canvas" width="800" height="600"></canvas><script type="text/javascript">var canvas = document.querySelector("#canvas")var cxt = canvas.getContext('2d')cxt.fillStyle = "hotpink"cxt.fillRect(0,0,100,100)//保留环境的状态(画笔的状态)cxt.save()cxt.scale(2,4)cxt.fillStyle = "deepskyblue"cxt.fillRect(100,0,300,100)cxt.save()//恢复之前保留的画笔状态，一层一层向上找//cxt.scale(0.5,0.25)也可以还原缩放cxt.restore()//恢复的第二个保留状态cxt.restore()cxt.fillRect(0,150,100,100)</script></body>
</html>

结果：

时钟应用

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><canvas id="canvas" width="800" height="600"></canvas><script type="text/javascript">var canvas = document.querySelector("#canvas")var cxt = canvas.getContext('2d')function renderClock(){//清除画布cxt.clearRect(0,0,800,600)cxt.save()//将坐标移动到画布的中央cxt.translate(400,300)cxt.rotate(-2*Math.PI/4)cxt.save()//绘制表盘cxt.beginPath()//圆心坐标，r，起始角度，结束角度。cxt.arc(0,0,200,0,2*Math.PI)cxt.strokeStyle = "darkgrey"cxt.lineWidth = 10cxt.stroke()cxt.closePath()//绘制分钟刻度for(var j=0;j<60;j++){cxt.rotate(Math.PI/30)cxt.beginPath()cxt.moveTo(180,0)cxt.lineTo(190,0)cxt.lineWidth = 2;cxt.strokeStyle = "orangered"cxt.stroke()cxt.closePath()}cxt.restore()cxt.save()//绘制时钟刻度for(var i = 0;i<12;i++){cxt.rotate(Math.PI/6)cxt.beginPath()cxt.moveTo(180,0)cxt.lineTo(200,0)cxt.lineWidth = 10;cxt.strokeStyle = "darkgrey"cxt.stroke()cxt.closePath()}cxt.restore()cxt.save()var time = new Date()var hour =  time.getHours()var min = time.getMinutes()var sec = time.getSeconds()//如果时间是大于12的话,就直接减去12hour = hour>12?hour-12:hour//绘制秒针cxt.beginPath()//根据秒针的时间进行旋转cxt.rotate(2*Math.PI/60*sec)cxt.moveTo(-30,0)cxt.lineTo(170,0)cxt.lineWidth = 2;cxt.strokeStyle = "red"cxt.stroke()cxt.closePath()cxt.restore()cxt.save()//绘制分针cxt.beginPath()//根据分针的时间进行旋转,一圈1小时，60分钟，3600秒cxt.rotate(2*Math.PI/60*min+2*Math.PI/3600*sec)cxt.moveTo(-20,0)cxt.lineTo(150,0)cxt.lineWidth = 4;cxt.strokeStyle = "darkblue"cxt.stroke()cxt.closePath()cxt.restore()cxt.save()//绘制时针cxt.beginPath()//根据时针的时间进行旋转cxt.rotate(2*Math.PI/12*hour+2*Math.PI/60/12*min + 2*Math.PI/12/60/60*sec)cxt.moveTo(-20,0)cxt.lineTo(120,0)cxt.lineWidth = 6;cxt.strokeStyle = "darkslategray"cxt.stroke()cxt.closePath()cxt.beginPath()cxt.arc(0,0,10,0,2*Math.PI)cxt.fillStyle  = "deepskyblue";cxt.fill()cxt.closePath()cxt.restore()cxt.restore()}setInterval(function(){renderClock()},1000)</script></body>
</html>

结果：

javascript学习-canvas相关推荐

javascript学习-canvas图的叠加
canvas图的叠加 [重要]源图像 = 您打算放置到画布上的绘图. 目标图像 = 您已经放置在画布上的绘图. 图像操作 <!DOCTYPE html> <html><h ...
WebGL（三）——学习Canvas及简单图形绘制
WebGL(三)--学习Canvas及简单图形绘制 Canvas简介 canvas是HTML5新增的一个可以使用javascript脚本在其中绘制图像的HTML元素(容器),它可以用来制作图像.动画, ...
html5怎么修改图片大小,HTML5 javascript修改canvas的大小
方法1: 设定固定的值,这种方式跟在html中设定canvas的值没有什么区别: window.onload = function(){ canvas.height = 100; canvas.wid ...
html坐标截取图片,JavaScript+html5 canvas实现本地截图教程
最近有时间了解了下html5的各API,发现新浪微博的头像设置是使用canvas实现截图的,加之前段时间了解了下html5的File API使用File API 之FileReader实现文件上传&l ...
canvas使用滑杆交互_如何使用JavaScript和Canvas开发交互式文件上传器
canvas使用滑杆交互介绍 (Introduction) How nice or fun can we make the interactions on a website or web appl ...
Javascript学习7 - 脚本化浏览器窗口
原文:Javascript学习7 - 脚本化浏览器窗口本节讨论了文档对象模型.客户端Javascript下Window中的各项属性,包括计时器.Location对象.Histroy对象.窗口.浏览器 ...
Java程序猿的JavaScript学习笔记（12——jQuery-扩展选择器）
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
《Javascript入门学习全集》 Javascript学习第二季（实战4）
Javascript学习第二季(实战4) 上章的例子虽然实现了功能,也做了相应的判断,也符合标准了.但还有一个问题就是: Choose an image. 在html中只是为了图片切换而做的,而 ...
Java程序猿的JavaScript学习笔记（汇总文件夹）
最终完结了,历时半个月. 内容包含: JavaScript面向对象特性分析,JavaScript高手必经之路. jQuery源代码级解析. jQuery EasyUI源代码级解析. Java程序猿的J ...

javascript学习-canvas