关于html5之canvas的那些事

何为canvas

<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。默认情况下该矩形区域宽为300像素，高为150像素，设置宽高必须在canvas标签内部，不能加单位px。

大多数 Canvas 绘图 API 都没有定义在 <canvas> 元素本身上，而是定义在通过画布的 getContext() 方法获得的一个“绘图环境”对象上。

注意：样式中的宽高是对画布等比例缩放，画布的内容也相应的缩放

绘制路径

moveTo(x, y)方法设置线段的起点，lineTo(x, y)方法设置线段的终点，stroke()方法用来给透明的线段着色。默认是黑色。beginPath()重置路径，closePath（）创建从当前点到起始点的路径

现在用路径画一个矩形

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style>canvas {border: 1px solid black;width: 1000px;}</style>
</head>
<body>
<canvas id="cvs" width="1000" height="500"  ></canvas>
<script>var cvs = document.getElementById('cvs'); // 获取Canvas标签// 绘制2d图形，要传递2d作为参数// 绘制3d图形，要传递webgl作为参数var ctx = cvs.getContext('2d');//这里使用的是矩形函数的封装function strokeRect(ctx, x, y, w, h) {
//        ctx.beginPath();
        ctx.moveTo(x, y);ctx.lineTo(x + w, y);ctx.lineTo(x + w, y + h);ctx.lineTo(x, y + h);ctx.lineTo(x, y);  ctx.stroke();}strokeRect(ctx,100,100,150,150);//在画布中绘制一个起点位置在（100,100），宽高各为150px的矩形</script>
</body>
</html>

canvas常见的一些方法和属性

绘制矩形：

rect（x,y,w,h）自己不渲染，需使用fill()或stroke()

fillRect（x,y,w,h）绘制被填充的矩形默认黑色

strokeRect（x,y,w,h）绘制带边框的矩形默认黑色

设置属性：

fillStyle：填充颜色（注意顺序）

strokeStyle：线条颜色

lineWidth:线宽

lineJoin:边界样式

lineCap：端点样式

canvas设置文本

配合css一起使用

fillText(string, x, y) 用来绘制文本，它的三个参数分别为文本内容、起点的x坐标、y坐标
与此类似的还有strokeText方法，用来添加空心字。
fillText方法不支持文本断行，即所有文本出现在一行内。所以，如果要生成多行文本，只有调用多次fillText方法。

canvas简单动画的封装

不封装做个demo

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style>canvas {border: 1px solid black;}</style>
</head>
<body>
<canvas id="cvs" width="1000" height="500"></canvas>
<script>var cvs = document.getElementById('cvs');var ctx = cvs.getContext('2d');ctx.fillRect(50,50,50,50);var num = 0;setInterval(function(){num++;ctx.clearRect(0,0,1000,500);ctx.fillRect(num,num,50,50);},25)</script>
</body>
</html>

以框架形式封装呈现：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style>canvas {border: 1px solid black;}</style>
</head>
<body>
<canvas id="cvs" width="1000" height="500"></canvas>
<script>var cvs = document.getElementById('cvs');var ctx = cvs.getContext('2d');// 矩形绘制函数的封装function strokeRect(ctx, x, y, w, h) {ctx.beginPath();ctx.moveTo(x, y);ctx.lineTo(x + w, y);ctx.lineTo(x + w, y + h);ctx.lineTo(x, y + h);ctx.lineTo(x, y);ctx.stroke();}//构造函数function Rect(ctx, x, y, w, h) {this.ctx = ctx;this.x = x;this.y = y;this.w = w;this.h = h;}//构造函数的原型对象添加方法Rect.prototype.draw = function(){strokeRect(this.ctx,this.x,this.y,this.w,this.h);};var rect = new Rect(ctx,50,50,50,50);var displayObjects = [];displayObjects.push(rect);setInterval(function(){ctx.clearRect(0,0,1000,500);//在每次执行定时器时清除整个画布rect.x = rect.x+1;displayObjects.forEach(function(displayObject){displayObject.draw();})},25)</script>
</body>
</html>

canvas绘制圆和扇形

ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);绘制圆和扇形

　　arc方法的x和y参数是圆心坐标，radius是半径，startAngle和endAngle则是扇形的起始角度和终止角度（以弧度表示），

　　anticlockwise表示做图时应该逆时针画（true）还是顺时针画（false）。默认是逆时针。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title>
</head>
<body>
<canvas id="cvs" width="1000" height="500" style="border: 1px solid black;"></canvas>
<script>var cvs = document.getElementById('cvs'); var ctx = cvs.getContext('2d');//角度转弧度的封装函数function degToArc(deg) {return deg / 180 * Math.PI;}//空心圆
    ctx.beginPath();ctx.arc(50, 50, 50,degToArc(0),degToArc(360),true);ctx.strokeStyle = 'red';ctx.lineWidth = 5;ctx.stroke();//实心圆
    ctx.beginPath();ctx.arc(200, 50, 50,degToArc(0),degToArc(360),true);ctx.fillStyle = 'blue';ctx.lineWidth = 5;ctx.fill();//圆弧 逆时针旋转240度画弧
    ctx.beginPath();ctx.arc(50, 200, 50,degToArc(0),degToArc(120),true);ctx.strokeStyle = 'red';ctx.lineWidth = 2;ctx.stroke();//圆弧 顺时针旋转120度画弧
    ctx.beginPath();ctx.arc(200, 200, 50,degToArc(0),degToArc(120));ctx.strokeStyle = 'red';ctx.lineWidth = 2;ctx.stroke();</script>
</body>
</html>

绘制图像 drawImage()方法

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>绘制图像</title>
</head>
<body>
<canvas id="cvs" width="1000" height="500"></canvas>
<img id="img" alt="">
<script>var cvs = document.getElementById('cvs');var ctx = cvs.getContext('2d');var imgElem = new Image();// 由于加载图像需要时间 图像加载完成之后，才能调用绘制图像的函数imgElem.addEventListener('load', function () {// 三参数的绘制图像函数 原图//ctx.drawImage(imgElem,100,100);// 五参数的绘制图像函数:// 把图像绘制到Canvas的200*200的矩形之中 有缩放效果//ctx.drawImage(imgElem,100,100,200,200);// 九参数的绘制图像函数：// 从原图上截取一个矩形100*100，绘制到Canvas上的200*200的矩形中
        ctx.drawImage(imgElem,0, 0, 100, 100,100, 100, 200, 200)})imgElem.src = 'img.jpg';</script>
</body>
</html>

canvas的API有很多，在这只是暂时简单的总结了canvas几个常用的API

转载于:https://www.cnblogs.com/goweb/p/5415186.html

关于html5之canvas的那些事相关推荐

使用HTML5的Canvas和raycasting创建一个伪3D游戏(part1)
使用HTML5的Canvas和raycasting创建一个伪3D游戏(part1) 刚来这找到一篇好文,自己翻译了下:(原文:http://dev.opera.com/articles/view/cr ...
在html利用canvas蚂蚁,html5 利用canvas实现简单的人物走动
最近在学习html5,其中涉及到很关键的元素canvas-画布,在网上下载了一些游戏源代码,虽然能看懂,但是想单独地针对某个功能提取出来还是有难处的,于是乎自己又上网查找了一些例子,才将超级玛丽简单的 ...
用html5的canvas画布绘制贝塞尔曲线
查看效果:http://keleyi.com/keleyi/phtml/html5/7.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...
使用HTML5的canvas做一个会动的时钟
这次我们的目标是画一个会和时间同步的时钟,不过没有美学感觉,样子丑的厉害. HTML5支持canvas了,我们可以直接在页面上绘图了,我看了下canvas和GDI+的接口差不多,所以我们先了解些基本的 ...
HTML5 利用canvas API 展示阴影效果
HTML5的Canvas自带API可以显示阴影效果,主要还是在画布(canvas)的上下文对象(context)上做文章 <!DOCTYPE html> <head> < ...
HTML5画布(CANVAS)速查简表
>HTML5画布(Canvas)元素 <canvas id="myCanvas" width="500" height="300" ...
HTML5的Canvas画图模拟太阳系运转
今天研究的是利用HTML5的Canvas画图来模拟太阳系运转,首先,在这个太阳系里分为画轨道和画星球两个部分, 对于每一个星球我们要知道它的颜色和公转周期,如下图. 采用面向对象编程的思想,代码如下 ...
解决Html5用canvas绘制不出来图片的问题
转载自解决Html5用canvas绘制不出来图片的问题如果使用html5的ctx.drawImage(img,0,0);绘制不出来, 就改为: img.onload = function(){ ...
Html5中Canvas（画布）的使用
什么是 Canvas?HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像.画布是一个矩形区域,您可以控制其每一像素.canvas 拥有多种绘制路径.矩形.圆形.字符以及添加 ...

关于html5之canvas的那些事

何为canvas

绘制路径

canvas常见的一些方法和属性

canvas设置文本

canvas简单动画的封装

canvas绘制圆和扇形

绘制图像 drawImage()方法

canvas的API有很多，在这只是暂时简单的总结了canvas几个常用的API

关于html5之canvas的那些事相关推荐

最新文章

热门文章