html5-canvashtml5-canvas入门


Html5 Canvas功能和使用的索引

画布的功能

Canvas允许您以编程方式绘制到您的网页:

画布图纸可以广泛设计:

画布的用途

图纸可以组合并定位在画布上的任何位置,因此可用于创建:

  • 油漆/草图应用,
  • 快节奏的互动游戏,
  • 数据分析,如图表,图表,
  • 像Photoshop一样的成像,
  • 类似Flash的广告和华丽的网络内容。

Canvas允许您操纵图像的红色,绿色,蓝色和Alpha组件颜色。这允许画布操作具有类似于Photoshop的结果的图像。

  • 在像素级别重新着色图像的任何部分(如果使用HSL,您甚至可以在保留重要的光照和饱和度的同时重新着色图像,因此结果看起来不像是某人在图像上拍了一些油漆),
  • “敲除”图像中某个人/项目周围的背景,
  • 检测和填充图像的一部分(例如,将用户点击的花瓣的颜色从绿色变为黄色 - 只需点击花瓣!),
  • 做透视翘曲(例如在杯子的曲线周围包裹图像),
  • 检查图像的内容(例如,面部识别),
  • 回答有关图像的问题:停车位的这张图片中是否有停放的车?
  • 应用标准图像滤镜(灰度,棕褐色等)
  • 应用您可以想象的任何异国情调的图像滤镜(Sobel Edge Detection),
  • 合并图像。如果亲爱的祖母苏无法与家人团聚,只需将“photoshop”她带入团圆的形象。不喜欢考辛菲尔 - 只是“把他拉出来,
  • 播放视频/从视频中抓取一帧,
  • 将画布内容导出为.jpg | .png图像(您甚至可以选择裁剪或注释图像并将结果导出为新图像),

关于移动和编辑画布图纸(例如创建动作游戏):

  • 在画布上绘制某些内容后,无法移动或编辑现有图形。画布图可移动这种常见的误解值得澄清: 现有的画布图不能编辑或移动!
  • 画布绘制速度非常快。 Canvas可以在几分之一秒内绘制数百个图像,文本,线条和曲线。它在可用时使用GPU来加速绘图。
  • 画布通过快速重复绘制某些东西然后将其重新绘制到新位置来创建运动的幻觉。像电视一样,这种不断的重绘会让人眼前一亮。

画布大小和分辨率

画布的大小是它在页面上占据的区域,由CSS宽度和高度属性定义。

canvas {
   width : 1000px;
   height : 1000px;
}
 

画布分辨率定义它包含的像素数。通过设置画布元素的宽度和高度属性来设置分辨率。如果未指定,画布默认为300 x 150像素。

以下画布将使用上面的CSS大小,但由于未指定widthheight 因此分辨率将为300 x 150。

<canvas id="my-canvas"></canvas>
 

这将导致每个像素被不均匀地拉伸。像素方面是1:2。当画布拉伸时,浏览器将使用双线性过滤。这具有模糊拉伸像素的效果。

为了在使用画布时获得最佳效果,请确保画布分辨率与显示大小相匹配。

继上面的CSS样式以匹配显示大小后,添加画布,其widthheight 设置为与样式定义的像素数相同。

<canvas id = "my-canvas" width = "1000" height = "1000"></canvas>
 

检测画布上的鼠标位置

此示例将显示如何获取相对于画布的鼠标位置,以便(0,0) 将是HTML5 Canvas的左上角。该e.clientXe.clientY 将获得相对于文档的顶部位置鼠标,要改变这种基于对画布,我们减去前leftright 从客户端X和Y的画布位置

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "16px Arial";

canvas.addEventListener("mousemove", function(e) { 
    var cRect = canvas.getBoundingClientRect();        // Gets CSS pos, and width/height
    var canvasX = Math.round(e.clientX - cRect.left);  // Subtract the 'left' of the canvas 
    var canvasY = Math.round(e.clientY - cRect.top);   // from the X/Y positions to make  
    ctx.clearRect(0, 0, canvas.width, canvas.height);  // (0,0) the top left of the canvas
    ctx.fillText("X: "+canvasX+", Y: "+canvasY, 10, 20);
});
 

可运行的例子

Math.round 的使用是由于确保x,y 位置是整数,因为画布的边界矩形可能没有整数位置。

你好,世界

HTML

<canvas id="canvas" width=300 height=100 style="background-color:#808080;">
</canvas>
 

使用Javascript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.font = "34px serif";
ctx.textAlign = "center";
ctx.textBaseline="middle"; 
ctx.fillStyle = "#FFF";
ctx.fillText("Hello World",150,50);
 

结果

带有HTML5画布的Hello World

如何将Html5 Canvas元素添加到网页

Html5-Canvas ......

  • 是一个Html5元素。
  • 大多数现代浏览器(Internet Explorer 9+)都支持。
  • 是默认情况下透明的可见元素
  • 默认宽度为300px,默认高度为150px。
  • 需要JavaScript,因为必须以编程方式将所有内容添加到Canvas。

示例:使用Html5标记和JavaScript创建Html5-Canvas元素:

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; }
    #canvasHtml5{border:1px solid red; }
    #canvasJavascript{border:1px solid blue; }
</style>
<script>
window.onload=(function(){

    // add a canvas element using javascript
    var canvas=document.createElement('canvas');
    canvas.id='canvasJavascript'
    document.body.appendChild(canvas);

}); // end $(function(){});
</script>
</head>
<body>

    <!-- add a canvas element using html -->
    <canvas id='canvasHtml5'></canvas>

</body>
</html>
 

屏幕外的画布

很多时候,在使用画布时,您需要使用画布来保存一些内部像素数据。可以轻松创建屏幕外画布,获取2D上下文。屏幕外的画布也将使用可用的图形硬件进行渲染。

以下代码只是创建一个画布并用蓝色像素填充它。

function createCanvas(width, height){
    var canvas = document.createElement("canvas"); // create a canvas element
    canvas.width = width;
    canvas.height = height;
    return canvas;
}

var myCanvas = createCanvas(256,256); // create a small canvas 256 by 256 pixels
var ctx = myCanvas.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(0,0,256,256);
 

很多时候,屏幕外的画布将用于许多任务,你可能有很多画布。要简化画布的使用,可以将画布上下文附加到画布。

function createCanvasCTX(width, height){
    var canvas = document.createElement("canvas"); // create a canvas element
    canvas.width = width;
    canvas.height = height;
    canvas.ctx = canvas.getContext("2d");
    return canvas;
}
var myCanvas = createCanvasCTX(256,256); // create a small canvas 256 by 256 pixels
myCanvas.ctx.fillStyle = "blue";
myCanvas.ctx.fillRect(0,0,256,256);    
 

旋转

2D上下文的rotate(r) 方法将画布旋转指定原点周围的弧度 r

HTML

<canvas id="canvas" width=240 height=240 style="background-color:#808080;">
</canvas>

<button type="button" onclick="rotate_ctx();">Rotate context</button>
 

使用Javascript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var ox = canvas.width / 2;
var oy = canvas.height / 2;
ctx.font = "42px serif";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillStyle = "#FFF";
ctx.fillText("Hello World", ox, oy);

rotate_ctx = function() {
  // translate so that the origin is now (ox, oy) the center of the canvas
  ctx.translate(ox, oy);
  // convert degrees to radians with radians = (Math.PI/180)*degrees. 
  ctx.rotate((Math.PI / 180) * 15);
  ctx.fillText("Hello World", 0, 0);
  // translate back
  ctx.translate(-ox, -oy);
};
 

JSfiddle的现场演示

将画布保存到图像文件

您可以使用canvas.toDataURL() 方法将画布保存到图像文件,该方法返回画布图像数据的数据URI

该方法可以采用两个可选参数canvas.toDataURL(type, encoderOptions)type 是图像格式(如果省略则默认为image/png ); encoderOptions 是介于0和1之间的数字,表示图像质量(默认值为0.92)。

在这里,我们绘制一个画布并将画布的数据URI附加到“Download to myImage.jpg”链接。

HTML

<canvas id="canvas" width=240 height=240 style="background-color:#808080;">
</canvas>
<p></p>
<a id="download" download="myImage.jpg" href="" onclick="download_img(this);">Download to myImage.jpg</a>
 

使用Javascript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var ox = canvas.width / 2;
var oy = canvas.height / 2;
ctx.font = "42px serif";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillStyle = "#800";
ctx.fillRect(ox / 2, oy / 2, ox, oy);

download_img = function(el) {
  // get image URI from canvas object
  var imageURI = canvas.toDataURL("image/jpg");
  el.href = imageURI;
};
 

JSfiddle的现场演示