HTML5-Canvas元素

1、Canvas（画布）的概述
2、Canvas(画布)基本使用
- 2.1、 <canvas> 元素
- 2.2、渲染上下文(Thre Rending Context)
- 2.3、检测支持性
3、绘制不同线条颜色的三角形
- 3.1、绘制三角形
- - 3.1.1、绘制一个简单的三角形
  - 3.1.2、绘制一个不同边框颜色的三角形
- 3.2、绘制文字和图片
- 3.3、绘制矩形和圆形及图片
4、刮刮卡案例

1、Canvas（画布）的概述

Canvas通过Javascript在网页上来绘制2D图形。Canvas是逐像素进行渲染的。开发者可以通过javascript脚本实现任意绘图。可以通过多种方法使用canvas元素绘制路径、矩形、圆形、字符以及添加图像。
在Canvas中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

2、Canvas(画布)基本使用

<canvas id="tutorial" width="300" height="300"></canvas>

2.1、 <canvas> 元素

canvas 是一个二维网格。
canvas 的左上角坐标为 (0,0)
<canvas> 看起来和 <img> 标签一样，只是 <canvas> 只有两个可选的属性 width、heigth 属性，而没有 src、alt 属性。如果不给<canvas>设置 widht、height 属性时，则默认 width为300、height 为 150，单位都是 px。也可以使用 css 属性来设置宽高，但是如宽高属性和初始比例不一致，他会出现扭曲。所以，建议永远不要使用 css 属性来设置<canvas>的宽高。
由于某些较老的浏览器（尤其是 IE9 之前的 IE 浏览器）或者浏览器不支持 HTML 元素<canvas>，在这些浏览器上你应该总是能展示替代内容。支持 <canvas>的浏览器会只渲染 <canvas>标签，而忽略其中的替代内容。
不支持 <canvas>的浏览器则会直接渲染替代内容:

<canvas>你的浏览器不支持 canvas，请升级你的浏览器。
</canvas>

用 <img> 替换：

<canvas><img src="" alt="">
</canvas>

结束标签 </canvas>不可省略。

2.2、渲染上下文(Thre Rending Context)

</canvas>会创建一个固定大小的画布，会公开一个或多个渲染上下文(画笔)，使用渲染上下文来绘制和处理要展示的内容。
我们重点研究 2D 渲染上下文。其他的上下文我们暂不研究，比如， WebGL 使用了基于 OpenGL ES的3D 上下文 (“experimental-webgl”) 。

var canvas = document.getElementById('tutorial');
//获得 2d 上下文对象
var ctx = canvas.getContext('2d');

2.3、检测支持性

var canvas = document.getElementById('tutorial');if (canvas.getContext){var ctx = canvas.getContext('2d');// drawing code here
} else {// canvas-unsupported code here
}

例子：绘制两个长方形

<canvas id="tutorial" width="300" height="300"></canvas>
<script type="text/javascript">
function draw(){var canvas = document.getElementById('tutorial');if(!canvas.getContext) return;var ctx = canvas.getContext("2d");ctx.fillStyle = "rgb(200,0,0)";//绘制矩形ctx.fillRect (10, 10, 55, 50);ctx.fillStyle = "rgba(0, 0, 200, 0.5)";ctx.fillRect (30, 30, 55, 50);
}
draw();
</script>

3、绘制不同线条颜色的三角形

3.1、绘制三角形

3.1.1、绘制一个简单的三角形

<script type="text/javascript">
// 获取画布元素var example = document.getElementById('example')// 获取工具集var ctx = example.getContext('2d')// 定位一个起始点ctx.moveTo(50, 50)// 绘制第二个点ctx.lineTo(100, 50)// 绘制第三个点ctx.lineTo(75, 100)// 连接起始点/闭合路径// ctx.lineTo(50, 50)ctx.closePath()// 绘制线条ctx.stroke()
</script>

3.1.2、绘制一个不同边框颜色的三角形

绘制的颜色与线条宽度

// 设置线条的宽度，以像素为单位
ctx.linewidth = number
// 设置笔触图形的颜色
ctx.strokeStyle = color
// 设置填充图形的颜色
ctx.fillStyle = color

闭合路径

// 开始一条路径，或重置当前的路径，并切断和上一个图形的路径联系。
ctx.beginPath()
* 闭合路径的优势
可以实现不同大小和颜色图形的单独绘制。

<script type="text/javascript">// 获取画布元素var example = document.getElementById('example')// 获取工具集var ctx = example.getContext('2d')// 1、绘制第一个点// 设置绘制图形的颜色ctx.strokeStyle = 'pink'// 设置绘制图形的线条宽度ctx.lineWidth = 4ctx.moveTo(50, 50)ctx.lineTo(100, 50)// 重置当前路径// 绘制线条ctx.stroke()ctx.beginPath()// 2、绘制第二个点ctx.strokeStyle = 'orange'ctx.lineWidth = 4ctx.moveTo(100, 50)ctx.lineTo(75, 100)ctx.stroke()ctx.beginPath()// 3、绘制第三个点ctx.strokeStyle = 'blue'ctx.lineWidth = 4ctx.moveTo(75, 100)ctx.lineTo(50, 50)ctx.stroke()// ctx.beginPath()</script>

3.2、绘制文字和图片

指定位置

// 在指定位置和宽度内绘制文字
ctx.fillText(text, x, y, maxwidth)

设置字体名称和样式

// 设置字体名称和形状
ctx.font="字体属性" // bold 32px sans-serif

设置字体对齐位置

// 设置文本内容水平对齐方式
ctx.textAlign='水平方位' // center\left\right
// 设置文本内容垂直对齐方式
ctx.textBaseLine='垂直方位值' // top\middle\bottom

绘制内容另存为图片

// 当前绘制内容存为图片
ctx.toDataURL(type, encoderOptions) // image/png图片格式，0到1区间图片质量

<script type="text/javascript">// 获取画布元素var example = document.getElementById('example')// 获取工具集var ctx = example.getContext('2d')// 设置文字样式(要在绘制之前)ctx.font = "bold 20px 黑体"// 这些代码只是容易区分文字位置ctx.strokeStyle = "pink"ctx.moveTo(10, 30)ctx.lineTo(120, 30)ctx.stroke()ctx.beginPath()ctx.moveTo(30, 10)ctx.lineTo(30, 120)ctx.stroke()ctx.beginPath()ctx.moveTo(10, 60)ctx.lineTo(120, 60)ctx.stroke()ctx.beginPath()ctx.moveTo(60, 10)ctx.lineTo(60, 120)ctx.stroke()// 水平ctx.textAlign = "center"// 垂直ctx.textBaseline = "middle"// 调用工具集中的API绘制文字// 第一种(填充式)ctx.fillText('文字', 30, 30)// 第二种（描边）ctx.strokeText('画笔', 60, 60)// 将绘制的内容另存为图片(会返回一个base64的字符集)var imgUrl = example.toDataURL('image/png', 1)console.log(imgUrl);</script>

3.3、绘制矩形和圆形及图片

绘制矩形

// 1、先绘制矩形的路径，再描边或填充
ctx.rect(x, y, width, height);
ctx.stroke()
// 或
ctx.fill()
// 2、直接绘制无/有填充的矩形
ctx.strokeRect(x,y,width,height)
ctx.fillRect(x,y,width,height)

绘制有弧度的圆形

// 在指定位置绘制一个圆形
ctx.arc(x,y,startAngle,endAngle,clockwise) // 以(x, y) 为圆心，以r 为半径，从 startAngle 弧度开始到endAngle弧度结束。anticlosewise 是布尔值，true 表示逆时针，false 表示顺时针(默认是顺时针)。

绘制不同大小的图片

// 在画布上绘制固定坐标的图像
ctx.drawImage(img,x,y);
// 在画布上绘制不仅固定坐标，且规定图像的宽度和高度图像
ctx.drawImage(img,x,y,width,height)
// 在画布上剪切图像，并在画布上绘制被剪切的部分
ctx.drawImage(img,sx,sy,swidth,sheight,x,y,width,height)

4、刮刮卡案例

分为三个步骤：

将随机的中奖信息绘制到画布中
使用灰色的矩形覆盖中奖信息
使用鼠标划擦区域实现刮刮的效果

<script type="text/javascript">// 获取画布元素var example = document.getElementById('example')// 获取工具集var ctx = example.getContext('2d')// 定义一个中奖信息的数组var prices = ['步步高升', '幸福美满', '财运亨通', '财源广进']ctx.fillStyle = 'red'ctx.font = 'bold 36px 黑体'ctx.textAlign = 'center'ctx.textBaseline = 'middle'// 随机生成一个中奖信息元素，并绘制到画布中间ctx.fillText(prices[Math.floor(Math.random() * prices.length)], example.width / 2, example.height / 2)// 将绘制的中奖信息另存图片并作为画布元素的背景图片var imgUrl = example.toDataURL('image/png', 1)example.style.background = 'url(' + imgUrl + ')';// 绘制矩形盖住中奖信息ctx.clearRect(0, 0, example.width, example.height)// 设置矩形的绘制颜色ctx.fillStyle = '#ddd'// 绘制盖住的区域ctx.fillRect(0, 0, example.width, example.height)var flag = falseexample.onmousedown = function () {flag = truectx.globalCompositeOperation = 'destination-out';}example.ontouchstart = function () {flag = truectx.globalCompositeOperation = 'destination-out';}example.onmousemove = function (e) {if (flag) {console.log(e);var x = e.offsetXvar y = e.offsetYctx.fillStyle = 'pink'ctx.fillRect(x, y, 30, 30)}}example.ontouchmove = function (e) {if (flag) {console.log(e);var x = e.touches[0].clientXvar y = e.touches[0].clientYctx.fillStyle = 'pink'ctx.fillRect(x, y, 30, 30)}}example.onmouseleave = function () {flag = false}example.ontouchend = function () {flag = false}</script>

Canvas（画布）的使用相关推荐

js实现图片虚化_js canvas画布实现高斯模糊效果
最近项目中有一个需求是实现图片的局部模糊效果,看上去一个挺难的效果.在实现局部模糊效果前,首先能够实现全部模糊.经过和度娘的一番较劲后,找到了一个不错的案例,然后在他的基础上,经过一番修改,和备注,实 ...
用html5的canvas画布绘制贝塞尔曲线
查看效果:http://keleyi.com/keleyi/phtml/html5/7.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...
js将文字填充与canvas画布再转为图片
需求:封装consul服务的webUI: 原因:展示consul的服务信息时,需要嵌套动画,由于其没有内置的icon,所以将服务name放于图片位: 分析:展示信息时采用了卡片式的服务布局,缩放式的服 ...
前端实现可绘制的canvas画布_前端图形学基础（五）——Canvas状态管理
点击右上角的关注,不定期前端干货分享!! 欢迎来到我的前端图形学系列文章: 前端图形学基础(一)--Canvas基础入门前端图形学基础(二)--Canvas基础前端图形学基础(三)--Canvas ...
更新——Canvas画布动画效果之实现倒计时
Hello,大家好! 小W复活啦!继续欢乐的给大家更博,输送新知识~~ 不开玩笑啦!秒进正题~~~ 上次更博,小W给大家介绍了Canvas画布的基础部分,以及实现了一个由7*10点阵图显示的倒计时的基 ...
使用HTML5的Canvas画布来剪裁用户头像
日期:2013-5-23 来源:GBin1.com 本文来自极客标签社区用户webgeek的一个在线HTML5web开发小技巧,帮助你使用html5的画布功能来切割用户上传的大头照. 在线调试例如 ...
canvas画布会黑屏吗_Android SurfaceView 黑屏问题
说一个真实的案例.其中需求要做一个绘图功能,一听到绘图,自然而然就像到了SurfaceView这个类.所以我就用了. android:layout_width="match_parent&q ...
HTML5 API详解（12）:canvas画布API提供的内容很丰富啊~
不考虑代码质量的话,一般来说css3>canvas>纯js. 1. css3动画是独立与js线程的,js的运算操作不会阻塞css3的动画,所以在系统cpu占用率较高的时候,css3的动画性 ...
selenium webdriver 实现Canvas画布自动化测试
https://blog.csdn.net/xiaoguanyusb/article/details/80324210 由借鉴意义, 转过来 canvas 是一个画布,定位元素时只能定位到画布上,如下 ...
python selenium canvas_selenium webdriver 实现Canvas画布自动化测试
https://blog.csdn.net/xiaoguanyusb/article/details/80324210 由借鉴意义, 转过来 canvas 是一个画布,定位元素时只能定位到画布上,如下 ...

Canvas（画布）的使用

HTML5-Canvas元素

1、Canvas（画布）的概述

2、Canvas(画布)基本使用

2.1、 <canvas> 元素

2.2、渲染上下文(Thre Rending Context)

2.3、检测支持性

3、绘制不同线条颜色的三角形

3.1、绘制三角形

3.1.1、绘制一个简单的三角形

3.1.2、绘制一个不同边框颜色的三角形

3.2、绘制文字和图片

3.3、绘制矩形和圆形及图片

4、刮刮卡案例

Canvas（画布）的使用相关推荐

最新文章

热门文章

Canvas（画布）的使用

HTML5-Canvas元素

1、Canvas（画布）的概述

2、Canvas(画布)基本使用

2.1、 <canvas> 元素

2.2、渲染上下文(Thre Rending Context)

2.3、检测支持性

3、绘制不同线条颜色的三角形

3.1、绘制三角形

3.1.1、 绘制一个简单的三角形

3.1.2、 绘制一个不同边框颜色的三角形

3.2、绘制文字和图片

3.3、绘制矩形和圆形及图片

4、刮刮卡案例

Canvas（画布）的使用相关推荐

最新文章

热门文章

3.1.1、绘制一个简单的三角形

3.1.2、绘制一个不同边框颜色的三角形