创建一个画布（Canvas）
一个画布在网页中是一个矩形框，通过 <canvas> 元素来绘制.
注意: 默认情况下 <canvas> 元素没有边框和内容。
<canvas>简单实例如下:
引用
<canvas id="myCanvas" width="200" height="100"></canvas>
注意: 标签通常需要指定一个id属性 (脚本中经常引用), width 和 height 属性定义的画布的大小.
提示:你可以在HTML页面中使用多个 <canvas> 元素.
使用 style 属性来添加边框:
实例
引用
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>
使用 JavaScript 来绘制图像
canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：
引用
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>
</body>
</html>
Canvas 坐标
canvas 是一个二维网格。
canvas 的左上角坐标为 (0,0)
上面的 fillRect 方法拥有参数 (0,0,150,75)。
意思是：在画布上绘制 150x75 的矩形，从左上角开始 (0,0)。
Canvas - 路径
在Canvas上画线，我们将使用以下两种方法：
moveTo(x,y) 定义线条开始坐标
lineTo(x,y) 定义线条结束坐标
绘制线条我们必须使用到 "ink" 的方法，就像stroke().
引用
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
</script>
</body>
</html>
在canvas中绘制圆形, 我们将使用以下方法:
arc(x,y,r,start,stop)
Canvas - 文本
使用 canvas 绘制文本，重要的属性和方法如下：
font - 定义字体
fillText(text,x,y) - 在 canvas 上绘制实心的文本
strokeText(text,x,y) - 在 canvas 上绘制空心的文本
使用 fillText():
引用
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.strokeText("Hello World",10,50);
</script>
</body>
</html>
Canvas - 渐变
渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。
以下有两种不同的方式来设置Canvas渐变：
createLinearGradient(x,y,x1,y1) - 创建线条渐变
createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变
当我们使用渐变对象，必须使用两种或两种以上的停止颜色。
addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1.
使用渐变，设置fillStyle或strokeStyle的值为 渐变，然后绘制形状，如矩形，文本，或一条线。
使用 createLinearGradient():
引用
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Create gradient
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
使用 createRadialGradient():
实例
创建一个径向/圆渐变。使用渐变填充矩形：
引用
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Create gradient
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
Canvas - 图像
把一幅图像放置到画布上, 使用以下方法:
drawImage(image,x,y)
引用
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);
分享到：
相关推荐
html2canvas是一款强大的JavaScript库，能够将HTML元素转换成Canvas图像。它不依赖于服务器端的渲染，完全在客户端完成，这对需要截图网页或网页元素的场景非常有用。html2canvas支持各种浏览器，包括Firefox 3.5+、...
ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-...
Canvas开发、入门学习Canvas技术代码。 HTML5 Canvas核心技术源码技术代码、图形、动画与游戏开发。 Canvas开发、入门学习Canvas技术代码。 HTML5 Canvas核心技术源码技术代码、图形、动画与游戏开发。 Canvas开发、...
这个效果不仅能够为网页增添视觉吸引力，而且展示了Canvas和CSS的强大结合。以下是对实现这一效果所需技术的详细解释。 首先，让我们了解什么是Canvas。Canvas是HTML5引入的一个绘图元素，允许开发者在网页上动态...
这个“canvas简单实例详解”将带你深入了解Canvas的基本用法和常见操作，为你的网页开发添加丰富的视觉效果。 一、Canvas基本结构 Canvas元素在HTML中以`<canvas>`标签表示，可以通过ID来引用并进行JavaScript操作...
在IT领域，Canvas自定义编辑器是一个非常关键的工具，特别是在网页开发中，它允许开发者创建高度交互式的、基于浏览器的多媒体编辑环境。Canvas是HTML5的一个重要元素，提供了在网页上绘制图形的能力，而自定义编辑...
本文将详细介绍如何使用Canvas进行文字与图片的合成，通过一个简单的入门Demo来展示具体实现过程。 首先，我们需要在HTML文档中创建一个`<canvas>`元素，并为其分配一个ID以便于在JavaScript中引用： ```html ...
在`canvas`上绘制完视频帧后，我们可以使用`toDataURL()`方法将`canvas`的内容转换为一个数据URL，该URL表示的是一个Base64编码的图像，通常以`data:image/jpeg;base64,`或`data:image/png;base64,`开头。这可以被...
在微信小程序中，Canvas是一个非常重要的组件，它允许开发者在页面上进行动态绘图，创建丰富的交互体验。这个"小程序canvasDemo"项目就是一个用于展示如何使用canvas功能的实例。在这个项目中，我们将深入探讨以下几...
- 最后，通过Canvas的toDataURL方法，可以将绘制好的Canvas内容转换为data URL，即可以直接使用的图片URL。 2. **uniAPP集成html2canvas**： - 在uniAPP项目中，可以通过npm或yarn安装html2canvas库，然后在...
在本主题中，我们将深入探讨如何使用CSS3和Canvas来实现图片的模糊效果，特别是在Canvas上进行交互设计时如何应用模糊特效。 首先，CSS3已经提供了`filter`属性来实现元素的模糊效果。通过`filter: blur(x)`，我们...
在Android图形系统中，`Canvas`是用于在Bitmap或Surface上进行绘图操作的重要类。它提供了各种绘制路径、文本、矩形、圆形以及其他图形的方法。`save()`和`restore()`是`Canvas`中两个非常关键的方法，它们主要用于...
4. **回调函数**：提供onrendered回调函数，当Canvas渲染完成后会触发，开发者可以在此处进行后续操作，比如保存图片或进行图像处理。 三、使用方法 使用html2canvas非常简单，只需要在HTML文档中引入库文件，然后...
在这个场景中，我们关注的是如何利用Canvas来播放视频。这涉及到HTML5的Media API和Canvas API的结合使用，使得视频内容能够在Canvas元素上呈现。 首先，HTML5的`<video>`标签引入了在网页上嵌入视频的能力，它提供...
在Canvas中，每个子元素的位置是通过设置`Canvas.Left`、`Canvas.Right`、`Canvas.Top`和`Canvas.Bottom`属性来确定的，这些属性分别定义了元素相对于Canvas容器的左侧、右侧、顶部和底部的距离。例如，在以下代码...
1. 当在不支持Canvas的浏览器中加载包含FlashCanvas的页面时，JavaScript会检测到Canvas元素。 2. FlashCanvas会动态插入一个Flash对象来替代Canvas元素。 3. JavaScript API调用Canvas的绘图方法时，这些方法会被...
在微信小程序中，Canvas是一个非常重要的组件，它允许开发者在界面上绘制图形、文字等元素，从而实现丰富的交互效果。本项目着重讲解如何利用Canvas在微信小程序中实现文字的自由移动。 首先，Canvas是一个HTML5的...
"canvas动态画出视图树"这个主题涉及到如何利用Canvas API来构建并动态更新一个可视化的视图层次结构，即视图树。视图树是用户界面的一种抽象表示，其中每个节点代表一个视图，节点之间的关系定义了它们的嵌套和布局...
如果需要在canvas上进行动态交互，比如点击canvas时检测是否与div重叠，或者让div跟随鼠标移动，我们需要用到JavaScript。例如，可以监听canvas的`mousedown`和`mousemove`事件，然后通过计算鼠标位置与div的位置...
"canvas可视化波形音频播放器(原创)"项目就是这样一个实现，它将音频数据与视觉元素相结合，提供了一种直观的音频播放体验。 首先，我们要理解Canvas的基本概念。Canvas是一个基于矢量图形的二维画布，通过...