<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<div>
<canvas id="myCanvas" width="800" height="600" style="border: 1px solid #ccc; float: left;">
Your browser does not support the canvas element.
</canvas>
<div style="float: left; padding-left: 20px;">
<input type="button" value="画随机点" onclick="interval=setInterval(randomPixel,1);" />
<input type="button" value="停止" onclick="clearInterval(interval);" />
<input type="button" value="清除" onclick="clearCanvas();" />
</div>
</div>
<div style="clear: both;">
<a onclick="Clear();">清除</a> <a onclick="DrawRect();">矩形</a> <a onclick="DrawLine();">
线条</a> <a onclick="DrawCircle();">圆形</a> <a onclick="DrawGradient();">渐变背景</a>
<a onclick="DrawImage();">显示图片</a> <a onclick="DrawText();">文字</a> <a onclick="Animation();">
动画</a> <a onclick="DrawMap();">绘制网格</a>
<a onclick ="DrawRounded();">圆角</a>
<a onclick ="DrawArc();"> 弧线</a>
</div>
<script type="text/javascript">
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
//路径的轮廓颜色和填充颜色由 strokeStyle 和 fillStyle 属性决定。
function Clear() {
ctx.clearRect(0, 0, 800, 600);
}
function DrawRect() {
ctx.fillStyle = "#FF0000"; //填充颜色
ctx.fillRect(0, 0, 150, 75);
//fillRect(x,y,width,height) : 画一个填充的矩形
//strokeRect(x,y,width,height) : 为一个矩形描边
}
function DrawLine() {
ctx.lineWidth = 20; //线宽
ctx.moveTo(10, 10); //moveTo(x, y) 方法设置绘图起始坐标
ctx.lineTo(150, 50); //经过点坐标
ctx.lineTo(10, 50); //经过点坐标
ctx.lineTo(200, 80); //经过点坐标
ctx.stroke(); //设置边框
}
function DrawCircle() {
ctx.fillStyle = "#FF0000"; //填充颜色
ctx.beginPath(); //通过 canvas 路径（path）可以绘制任意形状,beginPath()开始绘制
ctx.arc(200, 200, 30, 0, Math.PI * 2, true); //ctx.arc(圆心x, 圆心y, 圆半径R, 0, Math.PI * 2, true);
//arc(x, y, radius, startAngle, endAngle, anticlockwise)
//(x,y)是圆弧的圆心，radius-半径, startAngle和endAngle是圆弧的开始和结束弧度（radians = (Math.PI/180)*degree)，anticlockwise为true的话是逆时针，否则为顺时针
ctx.closePath(); //closePath() 结束自定义图形绘制。
ctx.fill(); //添加填充
}
function DrawGradient() {
var grd = ctx.createLinearGradient(0, 0, 800, 50); //创建线性渐变
grd.addColorStop(0, "#ccc");
grd.addColorStop(1, "#fff");
ctx.fillStyle = grd;
ctx.fillRect(0, 0, 400, 400);
}
function DrawImage() {
var img = new Image()
img.src = "jingxuan240.jpg"
ctx.drawImage(img, 0, 0,800,600);
}
function DrawText() {
//font：文字字体，同 CSS font-family 属性
//textAlign：文字水平对齐方式。可取属性值: start, end, left, right, center。默认值:start.
//textBaseline：文字竖直对齐方式。可取属性值：top, hanging, middle,alphabetic, ideographic, bottom。默认值：alphabetic.
ctx.fillStyle = '#00F';
ctx.font = 'bold 20px 简体';
ctx.textBaseline = 'top';
ctx.texAlign = "start";
ctx.fillText('Hello Canvas! 显示文字', 10, 10);
}
function DrawMap() {
ctx.beginPath();
for (var x = 0.5; x < 800; x += 10) {
ctx.moveTo(x, 0);
ctx.lineTo(x, 600);
}
for (var y = 0.5; y < 600; y += 10) {
ctx.moveTo(0, y);
ctx.lineTo(800, y);
}
ctx.strokeStyle = "#eee";
ctx.stroke();
}
function DrawRounded() {
ctx.strokeStyle = '#ccc';
ctx.lineWidth = 5;
//lineCap指定线条的末端如何绘制,round这个值指定了线段应该带有一个半圆形的线帽，半圆的直径等于线段的宽度，并且线段在端点之外扩展了线段宽度的一半。
ctx.lineCap = "round";
//lineJoin 属性说明如何绘制交点。值 "round" 说明定点的外边缘应该和一个填充的弧接合，这个弧的直径等于线段的宽度。"
ctx.lineJoin = "round";
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(200, 10);
ctx.lineTo(200, 200);
ctx.lineTo(10, 200);
ctx.lineTo(10, 10);
ctx.stroke();
ctx.closePath();
}
function DrawArc() {
ctx.lineWidth = 2;
ctx.beginPath();
ctx.arc(100, 100, 30, 0, Math.PI / 2, false)
ctx.stroke();
ctx.closePath();
ctx.beginPath();
ctx.arc(200, 100, 30, 0, Math.PI, false)
ctx.stroke();
ctx.closePath();
ctx.beginPath();
ctx.arc(300, 100, 30, 0, Math.PI/4, false )
ctx.stroke();
ctx.closePath();
ctx.beginPath();
ctx.arc(400, 100, 30, Math.PI, Math.PI * 2, false)
ctx.stroke();
ctx.closePath();
// 二次方曲线以及贝塞尔曲线
//quadraticCurveTo(cp1x, cp1y, x, y)
//bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
//(cp1x, cp1y),(cp2x,cp2y)是曲线的控制点（红点），(x,y)是曲线的终点
ctx.strokeStyle = "#E82C2C"
ctx.beginPath();
ctx.moveTo (400,150)
ctx.quadraticCurveTo(150, 150, 150, 400)
ctx.stroke();
ctx.closePath();
ctx.beginPath();
ctx.moveTo(50, 150)
ctx.bezierCurveTo(30, 50, 600, 0, 300, 20)
ctx.stroke();
ctx.closePath();
}
</script>
<script type='text/javascript'>
//下面的例子绘制了不同颜色的贝塞尔曲线：
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var waves = ["rgba(195, 002, 002, 0.6)",
"rgba(174, 000, 000, 0.3)",
"rgba(227, 093, 068, 0.3)",
"rgba(234, 135, 109, 0.3)",
]
var i = 0;
function draw() {
canvas.width = canvas.width;
for (var j = waves.length - 1; j >= 0; j--) {
var offset = i + j * Math.PI * 12;
ctx.fillStyle = (waves[j]);
var randomLeft = Math.abs(Math.pow(Math.sin(offset / 100), 2)) * 200;
var randomRight = Math.abs(Math.pow(Math.sin((offset / 100) + 10), 2)) * 200;
var randomLeftConstraint = Math.abs(Math.pow(Math.sin((offset / 90) + 2), 2)) * 300;
var randomRightConstraint = Math.abs(Math.pow(Math.sin((offset / 90) + 1), 2)) * 300;
ctx.beginPath();
ctx.moveTo(0, randomLeft + 10);
// ctx.lineTo(canvas.width, randomRight + 10);
ctx.bezierCurveTo(canvas.width / 3, randomLeftConstraint, canvas.width / 3 * 2, randomRightConstraint, canvas.width, randomRight + 10);
ctx.lineTo(canvas.width, canvas.height);
ctx.lineTo(0, canvas.height);
ctx.lineTo(0, randomLeft + 10);
ctx.closePath();
ctx.fill();
}
i++;
}
function Animation() {
setInterval("draw()", 20);
}
</script>
<script type="text/javascript">
//获取上下文对象
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
//画布的宽度和长度
var width = parseInt(canvas.getAttribute("width"));
var height = parseInt(canvas.getAttribute("height"));
var imageData = ctx.createImageData(width, height);
function randomPixel() {
var x = parseInt(Math.random() * width);
var y = parseInt(Math.random() * height);
var index = y * width + x;
var p = index *4;
imageData.data[p + 0] = parseInt(Math.random() * 256);
imageData.data[p + 1] = parseInt(Math.random() * 256);
imageData.data[p + 2] = parseInt(Math.random() * 256);
imageData.data[p + 3] = parseInt(Math.random() * 256);
ctx.putImageData(imageData, 0, 0);
}
function clearCanvas() {
ctx.clearRect(0, 0, width, height);
imageData = ctx.createImageData(width, height);
}
</script>
</body>
</html>
在Canvas中绘制扇形：
function DrawSector() {
ctx.beginPath();
ctx.arc(100, 100, 200, 0, Math.PI / 2, false);
ctx.moveTo(300, 100);
ctx.lineTo(100, 100);
ctx.lineTo(100, 300);
ctx.strokeStyle = "#F74545";
ctx.lineWidth = 1;
ctx.stroke();
ctx.closePath();
ctx.beginPath();
ctx.arc(300, 300, 200, 0, Math.PI / 3, false);
ctx.moveTo(400, 473);
ctx.lineTo(300, 300);
ctx.lineTo(500, 300);
ctx.fillStyle = "#9FC4F2";
ctx.fill();
ctx.closePath();
var a = document.getElementById("txt1").value ;
var sec = Math.PI * (a / 180);
var y1 = Math.sin(sec)*200 + 50;
var x1 = Math.cos(sec) * 200 + 400;
ctx.beginPath();
ctx.arc(400, 50, 200, 0, sec, false);
ctx.moveTo(600, 50);
ctx.lineTo(400, 50);
ctx.lineTo(x1,y1 );
ctx.strokeStyle = "#EFBA5D";
ctx.lineWidth = 1;
ctx.stroke();
ctx.closePath();
}
帮助文档：
http://apps.hi.baidu.com/share/detail/24464202
灰常有趣的东西！
