下面的例子展示了如何利用Canvas画图。可以在FF和Chrome等浏览器下查看。
<!DOCTYPE html>
<html>
<head>
<title>
Canvas Example
</title>
<script type="text/javascript">
function loader()
{
var canvas = document.getElementById
('canvas');
var canvas1 = canvas.getContext('2d');
// Rectangles
canvas1.fillStyle = "rgba(0, 0, 200, 1)";
canvas1.fillRect(30, 30, 75, 70);
canvas1.fillStyle = "rgba(200, 200, 0, 1)";
canvas1.fillRect(70, 50, 55, 70);
canvas1.fillStyle = "rgba(200, 0, 0, 1)";
canvas1.fillRect(90, 50, 75, 50);
// Stroked triangles
canvas1.beginPath();
canvas1.strokeStyle = "rgba(200, 0, 0, 0.5)";
canvas1.moveTo(110, 205);
canvas1.lineTo(110, 125);
canvas1.lineTo(30, 205);
canvas1.closePath();
canvas1.stroke();
canvas1.beginPath();
canvas1.moveTo(100, 205);
canvas1.lineTo(100, 125);
canvas1.lineTo(20, 205);
canvas1.closePath();
canvas1.stroke();
canvas1.beginPath();
canvas1.moveTo(90, 205);
canvas1.lineTo(90, 125);
canvas1.lineTo(10, 205);
canvas1.closePath();
canvas1.stroke();
//Filled triangle
canvas1.fillStyle = "rgba(0, 200, 0, 0.5)";
canvas1.beginPath();
canvas1.moveTo(225, 25);
canvas1.lineTo(305, 25);
canvas1.lineTo(225, 105);
canvas1.closePath();
canvas1.fill();
// Heart
canvas1.fillStyle = "rgba(200, 0, 0, 0.5)";
canvas1.beginPath();
canvas1.moveTo(75, 250);
canvas1.bezierCurveTo(75, 247, 70, 235, 50, 235);
canvas1.bezierCurveTo(20, 235, 20, 272.5, 20, 272);
canvas1.bezierCurveTo(20, 290, 40, 312, 75, 330);
canvas1.bezierCurveTo(110, 312, 130, 290, 130, 272);
canvas1.bezierCurveTo(130, 272.5, 130, 235, 100, 235);
canvas1.bezierCurveTo(85, 235, 75, 247, 75, 250);
canvas1.closePath();
canvas1.fill();
//Quadratic curves
canvas1.strokeStyle = "rgba(0, 0, 0, 1)";
canvas1.beginPath();
canvas1.moveTo(275, 125);
canvas1.quadraticCurveTo(225, 125, 225, 162);
canvas1.quadraticCurveTo(260, 200, 265, 200);
canvas1.quadraticCurveTo(325, 200, 325, 162);
canvas1.quadraticCurveTo(325, 125, 275, 125);
canvas1.closePath();
canvas1.stroke();
// Arcs
canvas1.beginPath();
canvas1.arc(275, 275, 50, 0, Math.PI * 2, true);
canvas1.moveTo(310, 275);
canvas1.arc(275, 275, 35, 0, 0.75 * Math.PI, false);
canvas1.moveTo(300, 255);
canvas1.arc(265, 255, 35, 0, 0.5 * Math.PI, false);
canvas1.moveTo(280, 255);
canvas1.arc(245, 255, 35, 0, 0.2 * Math.PI, false);
canvas1.closePath();
canvas1.stroke();
canvas1.font = 'italic 40px sans-serif';
canvas1.strokeText("Hello!", 50, 400);
}
</script>
</head>
<body onload="loader()">
<h1>Canvas Example</h1>
<canvas id="canvas" width="600"
height="500">
</canvas>
</body>
</html>
源码下载：
http://www.ctdisk.com/file/2022154
分享到：
相关推荐
该代码利用HTML5中的Canvas控件编写的画图页面，可以选择直线，圆和矩形三种图形，任意选择颜色进行画图。
利用context.drawImage(canvasImg,copyStartPosX,copyStartPosY,copyImgWidth,copyImgHeight,canvasStartPosX,canvasStartPosY,canvasImgWidth,canvasImgHeight);实时画图呈现手电筒效果
并深入探讨了HTML5引入的核心标签Canvas元素，介绍了Canvas可以实现的主要功能，在此基础上实现了部分类似Windows画图板的功能，包括铅笔、图章仿制、画直线、圆、矩形、橡皮擦、背景图、取色板、插入文字等功能，在...
本文详细分析了HTML5技术的简介和发展前景，并深入探讨了HTML5引入的核心标签Canvas元素，介绍了Canvas可以实现的主要功能，在此基础上实现了部分类似Windows画图板的功能，包括铅笔、图章仿制、画直线、圆、矩形、...
网络应用开发是一项外延很广的领域，在企业级开发中，我们要学习各种服务器通信技术、软件架构及开发框架，而在另外一些实用软件及游戏的开发中，则又需要投入大量时间进行...对HTML5 Canvas画图功能感兴趣的读者阅读。
HTML5-Canvas- 利用HTML5的Canvas来制作一个画板，可以来在线画图，并下载
用html5实现的简单在线画图工具，包括以下几个部分： 图像 单独的按钮组 保存图片、清除画布 操作组(所有按钮中只能选取一个) 工具(画笔、橡皮、油漆桶、吸管、文字、放大) 形状(画线、画圆圈、画方框、画三角形、画...
利用HTML5 新特新 canvas 动态画图，同时，还实现了WEB SQL DATABASE 客户端嵌入式数据库增删改查的功能。(注意：完全支持的浏览器是chrome)
利用canvas进行简单的网页画图，适合刚接触的人
代码内付说明可以选择性观看，利用html5最新功能canvas画曲线图，利用了html5和ajax方法获得数据库的值让后让他改变图片，这里是用thinkphp写读取数据库的部分，有需要的朋友可以自己改造数据库读取的页面部分。
- html5 特性 - Promise based HTTP client for the browser and node.js 实现原理 利用 Canvas 画板功能实现海报： 项目中图片数据临时使用，所以 expressData 中数据直接写死 利用 Vue 与 axios 向后端发送数据...
主要介绍了js+canvas绘制矩形的方法,涉及JavaScript调用html5的canvas组件绘制图形的相关技巧,需要的朋友可以参考下
利用html5，javascript，css，css3进行画图，写文字，编辑，拖拽，填充，图片标注、编辑等功能！！！简单清晰，易上手！！！
利用书签处理DBGrid中的多个记录 将ComboBox中的内容直接拖放到DBGrid里 如何在DBGrid里放置图标 DBGrid控件精彩组合 DBChart图表控件的使用 在StringGrid组件中显示查询结果 使用流对象（Tstream）...
利用书签处理DBGrid中的多个记录 将ComboBox中的内容直接拖放到DBGrid里 如何在DBGrid里放置图标 DBGrid控件精彩组合 DBChart图表控件的使用 在StringGrid组件中显示查询结果 使用流对象（Tstream）实现数据表中...
ToolBar工具栏控件的使用动态建立主菜单选项窗口界面的动态分隔条动态...Canvas生成渐变色窗口背景WINAPM风格磁化窗口软件封面的图片显示制作实现图片的任意角度旋转奇妙的拼图游戏使用PaintBox控件制作画图程序使用...
ToolBar工具栏控件的使用 动态建立主菜单选项 窗口界面的动态分隔...Canvas生成渐变色窗口背景 WINAPM风格磁化窗口 软件封面的图片显示制作 实现图片的任意角度旋转 奇妙的拼图游戏 使用PaintBox...
ToolBar工具栏控件的使用 动态建立主菜单选项 窗口界面的动态...Canvas生成渐变色窗口背景 WINAPM风格磁化窗口 软件封面的图片显示制作 实现图片的任意角度旋转 奇妙的拼图游戏 使用...
10.2 GPS轨迹记录器——利用LocationListener在地图上画图并换算距离 10.3 女性贴身看护——AlarmManager.DatePicker.TimePicker 10.4 手机QRCode二维条形码生成器——Canvas与SurfaceHolder绘图 10.5 AndroidQRCode...