关于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

关于html5之canvas的那些事的更多相关文章

HTML5必须知道的那些事
[转自] http://www.cnblogs.com/hamy/archive/2012/02/21/2362110.html 再普及一次HTML5基础,HTML5必须知道的那些事,HTML5扫盲. ...
用html5的canvas画布绘制贝塞尔曲线
查看效果:http://keleyi.com/keleyi/phtml/html5/7.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...
HTML5在canvas中绘制复杂形状附效果截图
HTML5在canvas中绘制复杂形状附效果截图一.绘制复杂形状或路径在简单的矩形不能满足需求的情况下,绘图环境提供了如下方法来绘制复杂的形状或路径. beginPath() : 开始绘制一个新路 ...
HTML5之Canvas时钟(网页效果--每日一更)
今天,带来的是使用HTML5中Canvas标签实现的动态时钟效果. 话不多说,先看效果:亲,请点击这里众所周知,Canvas标签是HTML5中的灵魂,HTML5 Canvas是屏幕上的一个由Java ...
HTML5 画布canvas元素
HTML5的canvas元素以及随其而来的编程接口Canvas API应用前景极为广泛.简单地说,canvas元素能够在网页中创建一块矩形区域,这块矩形区域可以成为画布,这其中可以绘制各种图形.可别小 ...
HTML5 之Canvas绘制太阳系
<!DOCTYPE html> <html> <head> <title>HTML5_Canvas_SolarSystem</title> ...
HTML5 中canvas支持触摸屏的签名面板
1.前言最近实在是太忙了,从国庆之后的辞职,在慢慢的找工作,到今天在现在的这家公司上班大半个月了,太多的心酸泪无以言表,面试过程中,见到的坑货公司是一家又一家,好几家公司自己都只是上一天班就走了,其 ...
【HTML5】Canvas画布
什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以 ...
html5 之 canvas 相关知识(一)概念及定义
什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以 ...

随机推荐

java的深复制与浅复制
今天座右铭-----浪费时间就等于慢性自杀 ⑴浅复制(浅克隆) 被复制对象的所有变量都含有与原来的对象相同的值,而所有的对其他对象的引用仍然指向原来的对象.换言之,浅复制仅仅复制所考虑的对象,而不复 ...
搭建本地Ubuntu 镜像服务器
一.需求分析最近公司软件Team 有个需求是这样的:能不能在局域网搭建一个Ubuntu 镜像服务器, 这样作的好处是可以节省Ubuntu某些常用工具的安装时间. 二.部署过程 2.1 测试环境目前 ...
Android4.2中Phone的P-sensor的应用的分析。
先说现象,现象就是来电话,接通电话,把手机屏幕靠近脸部,遮挡住P-sensor,屏幕变黑了,不遮挡住P-sensor,屏幕就点亮了.接着我们来看看代码流程. 步骤一: 在PhoneGlobals.ja ...
京东区块排版负margin用法
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
抽象工厂模式firstones
与工厂方法模式的区别是工厂子类中会创建出同一类型的不同产品对象.工厂方法模式则工厂子类中只是创建一种具体的产品对象结构: 产品基类:子类继承的虚函数方法具体产品子类:实现该产品功能工厂基类:工厂 ...
iOS多线程编程指南（一）关于多线程编程（转）
原文:http://www.dreamingwish.com/article/ios-multi-threaded-programming-a-multi-threaded-programming.h ...
POJ2553-The Bottom of a Graph
id=2553">主题链接题意:求解Bottom(G).即集合内的点能够互相到达. 思路:有向图的强连通.缩点,找出出度为0的点,注意符合的点要按升序输出. 代码: #include ...
传iWatch 将在7月投入生产，10月出货，支持无线充电、触控、測量脉搏
今天又有关于 iWatch 的传言传出.据路透社的线人消息称,台湾的广达电脑(Quanta Computer Inc.)将于 7 月開始生产 iWatch.10 月出货,估计推出后首年的出货量为 50 ...
C#DataTable学习心得
C#DataTable学习心得一.DataSet.DataTable.DataRow.DataColumn 1] 在DataSet中添加DataTable DataSet.Tables.Add(Da ...
Windows Server 2008 安装好之后的简单配置
1.禁用密码复杂度在运行中输入GPEDIT.MSC 打开组策略,找到计算机配置->Windows设置->安全设置->账户策略中的密码策略,将“密码必须符合复杂性要求”设置为禁用即可 ...

关于html5之canvas的那些事

何为canvas

绘制路径

canvas常见的一些方法和属性

canvas设置文本

canvas简单动画的封装

canvas绘制圆和扇形

绘制图像 drawImage()方法

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

关于html5之canvas的那些事的更多相关文章

随机推荐

热门专题