• 何为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的那些事的更多相关文章

  1. HTML5必须知道的那些事

    [转自] http://www.cnblogs.com/hamy/archive/2012/02/21/2362110.html 再普及一次HTML5基础,HTML5必须知道的那些事,HTML5扫盲. ...

  2. 用html5的canvas画布绘制贝塞尔曲线

    查看效果:http://keleyi.com/keleyi/phtml/html5/7.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...

  3. HTML5在canvas中绘制复杂形状附效果截图

    HTML5在canvas中绘制复杂形状附效果截图 一.绘制复杂形状或路径 在简单的矩形不能满足需求的情况下,绘图环境提供了如下方法来绘制复杂的形状或路径. beginPath() : 开始绘制一个新路 ...

  4. HTML5之Canvas时钟(网页效果--每日一更)

    今天,带来的是使用HTML5中Canvas标签实现的动态时钟效果. 话不多说,先看效果:亲,请点击这里 众所周知,Canvas标签是HTML5中的灵魂,HTML5 Canvas是屏幕上的一个由Java ...

  5. HTML5 画布canvas元素

    HTML5的canvas元素以及随其而来的编程接口Canvas API应用前景极为广泛.简单地说,canvas元素能够在网页中创建一块矩形区域,这块矩形区域可以成为画布,这其中可以绘制各种图形.可别小 ...

  6. HTML5 之Canvas绘制太阳系

    <!DOCTYPE html> <html> <head> <title>HTML5_Canvas_SolarSystem</title> ...

  7. HTML5 中canvas支持触摸屏的签名面板

    1.前言 最近实在是太忙了,从国庆之后的辞职,在慢慢的找工作,到今天在现在的这家公司上班大半个月了,太多的心酸泪无以言表,面试过程中,见到的坑货公司是一家又一家,好几家公司自己都只是上一天班就走了,其 ...

  8. 【HTML5】Canvas画布

    什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以 ...

  9. html5 之 canvas 相关知识(一)概念及定义

    什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以 ...

随机推荐

  1. Linux 下防火墙端口设置

    方式1:     /sbin/iptables -I INPUT -p tcp --dport 8011 -j ACCEPT  #开启8011端口      /etc/rc.d/init.d/ipta ...

  2. iOS开发之GCD使用总结

    GCD是iOS的一种底层多线程机制,今天总结一下GCD的常用API和概念,希望对大家的学习起到帮助作用. GCD队列的概念 在多线程开发当中,程序员只要将想做的事情定义好,并追加到DispatchQu ...

  3. kindeditor更改图片上传时网络图片的路径

    当我们想要使用kindeditor的图片上传功能时,有两种选择图片方式,一种是本地选择,一种是在图片空间中选择,图片空间的默认地址是server上的/kindeditor/attached/image ...

  4. SQLSERVER分布式事务使用实例

    实例一 尊重原著作:本文参考自http://www.jb51.net/article/43540.htm --BEGIN DISTRIBUTED TRANSACTION [transactionnam ...

  5. oracle获取本月第一天和最后一天及Oracle trunc()函数的用法

    select to_char(trunc(add_months(last_day(sysdate), -1) + 1), 'yyyy-mm-dd') "本月第一天", to_cha ...

  6. ORACLE EBS BOM 展开(使用标准程序bompexpl.exploder_userexit展开)

    create or replace package cux_bom_pub is PROCEDURE bom_expand_to_temp( p_organization_id number, p_i ...

  7. Mysql联合查询UNION和UNION ALL的使用介绍

    UNION和UNION ALL的作用和语法 UNION 用于合并两个或多个 SELECT 语句的结果集,并消去表中任何重复行.UNION 内部的 SELECT 语句必须拥有相同数量的列,列也必须拥有相 ...

  8. JAVA 鲜为人知的二次标记 第六节

    又到周末啦,祝各位小伙伴有个愉快的周末.同时也不要忘了学习,上班的同伴们可以利用这两天的时间好好提升自己,在读书的小伙伴们也可以慢慢整理这一周所学到的东西.很多情况下我们看到对自己有用的东西都会保存起 ...

  9. 安全的PHP代码编写准则

    原文链接 绝不要信任外部数据或输入 关于 Web 应用程序安全性,必须认识到的第一件事是不应该信任外部数据.外部数据(outside data) 包括不是由程序员在 PHP 代码中直接输入的任何数据. ...

  10. BZOJ 1570: [JSOI2008]Blue Mary的旅行( 二分答案 + 最大流 )

    二分答案, 然后对于答案m, 把地点分成m层, 对于边(u, v), 第x层的u -> 第x+1层的v 连边. 然后第x层的u -> 第x+1层的u连边(+oo), S->第一层的1 ...