<!
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://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#the-canvas-element
http://apps.hi.baidu.com/share/detail/24464202
灰常有趣的东西！
转载于:https://www.cnblogs.com/xiaobuild/archive/2011/06/23/2087871.html
相关资源：HTML5 Canvas核心技术—图形、动画与游戏开发一书源代码
