HTML5 canvas 实例

什么是 Canvas？

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。

画布是一个矩形区域，您可以控制其每一像素。

canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

创建 Canvas 元素

向 HTML5 页面添加 canvas 元素。

规定元素的 id、宽度和高度：

<canvas id="myCanvas" width="200" height="100"></canvas>

JavaScript 使用 id 来寻找 canvas 元素：

var canvas = document.getElementById(id);

创建 context 对象：

var context = canvas.getContext("2d");

实例一：

代码：

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>canvas</title><script>function draw(id){var canvas = document.getElementById(id);if(canvas == null){return false;}var context = canvas.getContext("2d");context.fillStyle = "#eeeeef";context.fillRect(0,0,600,500);for(var i = 0;i <= 10;i++){context.beginPath();context.arc(i*25,i*25,i*10,0,Math.PI*2,true);context.closePath();context.fillStyle= "rgba(255,0,0,0.25)";context.fill();}}</script>
</head>
<body οnlοad="draw('canvas')"><canvas id="canvas" width="600px" height="500px"></canvas>
</body>
</html>

效果：

实例二：

代码：

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><script>function draw(id){var canvas = document.getElementById(id);if(canvas == null){return false;}var context = canvas.getContext("2d");context.fillStyle = "#eeeeef";context.fillRect(0,0,500,500);var dx = 150;var dy = 150;var s = 100;context.beginPath();context.fillStyle = "rgb(100,255,100)";context.strokeStyle = "rgb(0,0,100)";var x = Math.sin(0);var y = Math.cos(0);var dig = Math.PI/ 15*11;for(var i = 0; i<30; i++){var x = Math.sin(i*dig);var y = Math.cos(i*dig);context.lineTo(dx+x*s,dy+y*s);}context.closePath();context.fill();context.stroke();}</script>
</head>
<body οnlοad="draw('canvas')"><canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>

效果：

HTML5 canvas 实例相关推荐

HTML5 Canvas 基础API和实例
开发HTML代码是一件简单的事情,一个文字编辑器,然后一个支持HTML5的浏览器即可(本人的浏览器是Firefox8.0.1).了解HTML的朋友应该知道,HTML5中最让人兴奋的API是canvas ...
html5 canvas绘制圆形进度实例
2019独角兽企业重金招聘Python工程师标准>>> html5 canvas绘制圆形进度实例 <canvas id="test" width=200 h ...
h5大转盘 php,HTML5 canvas实现中奖转盘的实例代码
本篇文章给大家带来的内容是关于HTML5 canvas实现中奖转盘的实例代码,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 最近在学canvas做动画,于是就写个转盘练下手. 上个简 ...
html5 can,基于html5 can-vas实现漫天飞雪效果实例
本文实例讲述了基于html5 canvas实现漫天飞雪效果的方法,运行该实例可以看到很棒的下雪效果.如下图所示: 主要代码如下:代码如下:ttp://www.w3.org/TR/xhtml1/DTD/ ...
[Web Chart系列之一(续)]Web端图形绘制SVG,VML, HTML5 Canvas 简单实例
前言本篇是继 [Web Chart系列之一]Web端图形绘制SVG,VML, HTML5 Canvas 技术比较的补充和实例说明各种技术的使用方式. VML 的用法和实例引入命名空间之后,就可以 ...
HTML5教程实例-用Canvas制作线性渐变图形
HTML5教程实例-用Canvas制作线性渐变图形到目前为止,我们使用canvas绘制图形的基本知识已经介绍完毕,从本节开始,我们将介绍其他比较高级的绘制知识之一 - 线性渐变,首先我们来回顾一下& ...
使用html制作圆弧正方形,JavaScript+html5 canvas制作的圆中圆效果实例
本文实例讲述了JavaScript+html5 canvas制作的圆中圆效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: demo #canvas { background: ...
HTML5教程实例-用Canvas制作径向渐变图形
HTML5教程实例-用Canvas制作径向渐变图形上节课,我们学习了如何使用Canvas绘制线性渐变图形,今天我们来学习一下如何绘制径向渐变图形.通过上节课的学习,我们知道绘制线性渐变图形用到了一个 ...
php画布怎么清除,JavaScript_JavaScript html5 canvas画布中删除一个块区域的方法，本文实例讲述了html5 canvas画布 - phpStudy...
JavaScript html5 canvas画布中删除一个块区域的方法本文实例讲述了html5 canvas画布中删除一个块区域的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 附:图 ...

HTML5 canvas 实例

什么是 Canvas？

创建 Canvas 元素

HTML5 canvas 实例相关推荐

最新文章

热门文章