引用:
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial
示例:
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>html5 - canvas</title>
<meta http-equiv="doc" content="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial"/>
</head>
<body>
<canvas id="canvas_1" width="600" height="400" style="border:1px solid #ccc;"/>
<script type="text/javascript">
var canvas_1 = document.getElementById('canvas_1');
var ctx = canvas_1.getContext('2d');
//1. draw line
ctx.moveTo(20,20);
ctx.lineTo(20,90);
ctx.stroke(); // use stroke() method to draw line.
//2. draw filled triangle.
ctx.beginPath();
ctx.moveTo(40,20);
ctx.lineTo(40,90);
ctx.lineTo(80,90);
ctx.closePath();
ctx.stroke(); // use stroke() method to draw line.
ctx.fill(); // use fill() method to draw solid graphics.
//3.1 draw rectangle
ctx.strokeRect(100,20,70,70); // hollow.(having a hole or emputy inside)
//3.2 draw rectangle
ctx.fillStyle = "green"; // the fillStyle can be passed to a color.
ctx.fillRect(190,20,50,50); // solid.
//4. draw circle
var cx = 250;
var cy = 0;
ctx.beginPath();
ctx.arc(cx+75,75,50,0,Math.PI*2,true); // Outer circle
ctx.moveTo(cx+110,75);
ctx.arc(cx+75,75,35,0,Math.PI,false); // Mouth (clockwise)
ctx.moveTo(cx+65,65);
ctx.arc(cx+60,65,5,0,Math.PI*2,true); // Left eye
ctx.moveTo(cx+95,65);
ctx.arc(cx+90,65,5,0,Math.PI*2,true); // Right eye
ctx.stroke();
// Draw shapes
var cs = 400;
var cy = 20;
for (i=0;i<4;i++){
for(j=0;j<3;j++){
ctx.beginPath();
var x = cs+25+j*50; // x coordinate
var y = cy+25+i*50; // y coordinate
var radius = 20; // Arc radius
var startAngle = 0; // Starting point on circle
var endAngle = Math.PI+(Math.PI*j)/2; // End point on circle
var anticlockwise = i%2==1; // Draw anticlockwise
ctx.arc(x,y,radius,startAngle,endAngle, anticlockwise);
if (i>1){
ctx.fill();
} else {
ctx.stroke();
}
}
}
// draw text
// fillText(text, x, y [, maxWidth])
ctx.font = "48px serif";
ctx.fillText("Hello world", 10, 150);
// stroke text
// strokeText(text, x, y [, maxWidth])
ctx.font = "48px serif";
ctx.strokeText("Hello world", 10, 200);
</script>
</body>
</html>
![点击查看原始大小图片](http://dl2.iteye.com/upload/attachment/0120/7968/852c3ed8-c857-34d0-8fd2-690707d3023f-thumb.png)
- 大小: 37.3 KB
分享到:
相关推荐
HTML5环境下Canvas入门, 在Chrome或FF环境下可以预览, 些例说明了Canvas下可以随意的进行画图, 我的例子主要以带圆角的矩形及渐变颜色为例子
html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的...
HTML5 Canvas核心技术源码技术代码、图形、动画与游戏开发。 Canvas开发、入门学习Canvas技术代码。 HTML5 Canvas核心技术源码技术代码、图形、动画与游戏开发。 Canvas开发、入门学习Canvas技术代码。 HTML5 Canvas...
HTML5和Canvas是现代网页开发中的重要技术,它们为创建动态、交互式的用户界面提供了强大的工具。Canvas是HTML5的一个核心元素,它允许开发者通过JavaScript在网页上进行2D绘图,无需借助Flash或其他插件。这个...
《HTML 5 Canvas基础教程》从HTML5和JavaScript(以及jQuery)的基础知识讲起,全面介绍了HTML5Canvas的各种特性,包括渲染上下文、坐标系统、绘制图形、保存和恢复画布状态,以及变形、合成、处理图像和视频等,让...
HTML5 Canvas是Web开发中的一个强大工具,它允许开发者在网页上进行动态图形绘制,创造出丰富的交互式2D内容。这个“html5 canvas 游戏”是一个基于HTML5 Canvas技术开发的小游戏,主题是“兔子吃萝卜”,展示了...
HTML5的canvas标签是Web开发中的一个重要组成部分,它允许开发者在网页上绘制图形,实现动态图像和交互式视觉效果。然而,由于历史原因,早期版本的Internet Explorer(IE6到IE9)并不支持HTML5的新特性,包括canvas...
HTML5 Canvas 是一个强大的网页图形绘制工具,允许开发者在网页上动态绘制图像,而无需依赖任何插件。在这个场景中,我们关注的是如何利用Canvas来播放视频。这涉及到HTML5的Media API和Canvas API的结合使用,使得...
HTML5 Canvas是Web开发中的一个强大工具,它允许开发者在网页上进行动态图形绘制,创造出丰富的交互式用户体验。Canvas API提供了大量的方法和属性,使得JavaScript可以直接控制像素级别的图像操作。这个压缩包...
资源名称:HTML5 Canvas基础教程内容简介:《HTML5 Canvas基础教程》从HTML5和Javascript(以及jQuery)的基础知识讲起,全面介绍了HTML5 Canvas的各种特性,包括渲染上下文、坐标系统、绘制图形、保存和恢复...
HTML5 Canvas是Web开发中的一个强大工具,它允许开发者在网页上进行动态图像处理,包括绘制、修改和操作图像。在HTML5 Canvas中,我们可以通过JavaScript API实现图片的压缩功能,这对于优化网页性能,尤其是处理...
在现代Web开发中,HTML5的Canvas API是一个强大的工具,它允许开发者在浏览器端进行动态图形绘制和处理。本文将深入探讨如何利用HTML5 Canvas实现图片的马赛克效果,这是许多网页应用、照片编辑器和游戏中的常见功能...
HTML5 Canvas是Web开发中的一个强大工具,它允许开发者在网页上进行动态图形绘制,提供了丰富的API来创建交互式图像。这个"html5 canvas.rar"压缩包包含了一个关于Canvas的实例,非常适合那些想要学习或深化对HTML5 ...
HTML5 canvas 是一种在网页上绘制图形的API,它允许开发者通过JavaScript动态创建和修改二维图形,从而实现丰富的视觉效果。在这个"HTML5 canvas仿屏保动态管道"项目中,我们利用canvas元素来模仿经典的Windows屏保...
HTML2canvas是一个JavaScript库,它的主要功能是在浏览器环境中将HTML内容转换为Canvas图像,从而能够进一步将这些图像保存为图片格式,如JPEG、PNG等。这个工具在Web开发中非常实用,尤其对于需要在客户端生成屏幕...
HTML5的canvas元素是网页开发中的一个强大工具,它提供了在网页上动态绘制图形的能力,类似于画布。在这个场景中,我们关注的是如何利用canvas来创建一个流程图,一种用于表示程序逻辑或工作流程的图表。流程图通常...
HTML5 Canvas是Web开发中的一个强大工具,它允许开发者在网页上直接绘制图形,从而创建出丰富的交互式用户体验。EaselJS是基于HTML5 Canvas的一个JavaScript库,它为Canvas提供了一个更加高级、易于使用的API,使得...
HTML5 是一种强大的 web 开发技术,它在网页制作领域带来了许多创新,其中之一就是 Canvas 元素。Canvas 提供了一种在浏览器上进行动态图形绘制的能力,使得开发者无需依赖插件就能创建丰富的交互式图形应用。在电力...
《开源的HTML5 Canvas画图插件 - Literally Canvas详解》 HTML5的Canvas元素为网页带来了强大的图形绘制能力,而Literally Canvas则是一个优秀的基于Canvas的开源画图插件,它提供了一套完整的画图工具,使得用户...