8个前端知识点：HTML5(canvas应用)
2017-10-16 本文已影响0人
王钰峰
- (1) 应用 canvas笑脸
- (2) 应用 canvas画图
- (3) 应用 canvas变换
- (4) 应用 canvas内长方形拖拽
- (5) 应用 canvas内圆形拖拽
- (6) 应用 下载canvas绘图
- (7) 应用 canvas运动回调
- (8) canvas框架 jCanvaScript.js
(1) 应用 canvas笑脸
<canvas
width
=
"800"
height
=
"1200"
></canvas>
<script>
var
oC
=
document
.
querySelector
(
'canvas'
);
var
ctx
=
oC
.
getContext
(
'2d'
);
// face
ctx
.
fillStyle
=
'yellow'
;
ctx
.
arc
(
400
,
250
,
180
,
0
,
2
*
Math
.
PI
,
false
);
ctx
.
fill
();
ctx
.
stroke
();
// mouth
ctx
.
beginPath
();
ctx
.
lineCap
=
'round'
;
ctx
.
lineWidth
=
20
;
ctx
.
fillStyle
=
'red'
;
ctx
.
arc
(
400
,
280
,
80
,
0
,
Math
.
PI
,
false
);
// ctx.fill(); // 红色实心半圆张嘴笑脸
ctx
.
stroke
();
// 黑色半圆弧微笑脸
// eyes
ctx
.
beginPath
();
ctx
.
fillStyle
=
'black'
;
ctx
.
moveTo
(
350
,
200
);
ctx
.
arc
(
350
,
200
,
20
,
0
,
2
*
Math
.
PI
,
false
);
ctx
.
moveTo
(
450
,
200
);
ctx
.
arc
(
450
,
200
,
20
,
0
,
2
*
Math
.
PI
,
false
);
ctx
.
closePath
();
ctx
.
fill
();
</script>
(2) 应用 canvas画图
<canvas
width
=
"800"
height
=
"600"
></canvas>
<script>
var
oC
=
document
.
querySelector
(
'canvas'
);
var
ctx
=
oC
.
getContext
(
'2d'
);
oC
.
onmousedown
=
function
(
ev
)
{
var
{
clientX
,
clientY
}
=
ev
;
ctx
.
moveTo
(
clientX
,
clientY
)
oC
.
onmousemove
=
function
(
ev
)
{
ctx
.
clearRect
(
0
,
0
,
oC
.
width
,
oC
.
height
);
var
{
clientX
,
clientY
}
=
ev
;
ctx
.
lineWidth
=
5
;
ctx
.
lineTo
(
clientX
,
clientY
);
ctx
.
stroke
();
}
oC
.
onmouseup
=
function
()
{
oC
.
onmousemove
=
null
;
oC
.
onmouseup
=
null
;
}
}
</script>
(3) 应用 canvas变换
<canvas
width
=
"800"
height
=
"600"
></canvas>
<script>
var
oC
=
document
.
querySelector
(
'canvas'
);
var
ctx
=
oC
.
getContext
(
'2d'
);
var
degree
=
1
;
var
x1
=
300
;
var
y1
=
300
;
var
w1
=
100
;
var
h1
=
100
;
var
x2
=
100
;
var
y2
=
100
;
var
w2
=
50
;
var
h2
=
50
;
var
rotate1
=
0
;
var
rotate2
=
0
;
setInterval
(
function
()
{
ctx
.
clearRect
(-
oC
.
width
,
-
oC
.
height
,
oC
.
width
*
2
,
2
*
oC
.
height
);
ctx
.
save
();
ctx
.
translate
(
x1
,
y1
);
ctx
.
rotate
(
rotate1
);
ctx
.
fillRect
(-
w1
/
2
,
-
h1
/
2
,
w1
,
h1
);
ctx
.
restore
();
ctx
.
save
();
ctx
.
translate
(
x2
,
y2
);
ctx
.
rotate
(
rotate2
);
ctx
.
fillRect
(-
w2
/
2
,
-
h2
/
2
,
w2
,
h2
);
ctx
.
restore
()
rotate1
++;
rotate2
+=
0.2
;
},
100
)
function
d2a
(
deg
)
{
return
deg
/
180
*
Math
.
PI
}
</script>
(4) 应用 canvas内长方形拖拽
<canvas
width
=
"800"
height
=
"600"
></canvas>
<script>
var
oC
=
document
.
querySelector
(
'canvas'
);
var
ctx
=
oC
.
getContext
(
'2d'
);
var
rect
=
{
x
:
0
,
y
:
0
,
w
:
100
,
h
:
100
}
ctx
.
fillRect
(
rect
.
x
,
rect
.
y
,
rect
.
w
,
rect
.
h
);
oC
.
onmousedown
=
function
({
clientX
,
clientY
})
{
var
{
x
,
y
,
w
,
h
}
=
rect
;
var
disX
=
clientX
-
x
;
var
disY
=
clientY
-
y
;
if
(
clientX
>
x
&&
clientX
<
x
+
w
&&
clientY
>
y
&&
clientY
<
y
+
h
)
{
oC
.
onmousemove
=
function
({
clientX
,
clientY
})
{
ctx
.
clearRect
(
0
,
0
,
oC
.
width
,
oC
.
height
)
// **先清空画布再画
var
deltaX
=
clientX
-
disX
;
var
deltaY
=
clientY
-
disY
;
rect
.
x
=
deltaX
;
rect
.
y
=
deltaY
;
ctx
.
fillRect
(
rect
.
x
,
rect
.
y
,
rect
.
w
,
rect
.
h
);
}
oC
.
onmouseup
=
function
()
{
oC
.
onmousemove
=
null
;
oC
.
onmouseup
=
null
;
}
}
}
</script>
(5) 应用 canvas内圆形拖拽
（web前端学习交流群：328058344 禁止闲聊，非喜勿进！）
<canvas
width
=
"800"
height
=
"600"
></canvas>
<script>
var
oC
=
document
.
querySelector
(
'canvas'
);
var
ctx
=
oC
.
getContext
(
'2d'
);
var
circle
=
{
x
:
50
,
y
:
50
,
r
:
50
}
ctx
.
arc
(
circle
.
x
,
circle
.
y
,
circle
.
r
,
0
,
2
*
Math
.
PI
,
false
);
ctx
.
fill
();
oC
.
onmousedown
=
function
({
clientX
,
clientY
})
{
var
{
x
,
y
,
r
}
=
circle
;
var
disX
=
clientX
-
x
;
var
disY
=
clientY
-
y
;
if
(
ctx
.
isPointInPath
(
clientX
,
clientY
)
// 利用isPointInPath函数
)
{
oC
.
onmousemove
=
function
({
clientX
,
clientY
})
{
ctx
.
clearRect
(
0
,
0
,
oC
.
width
,
oC
.
height
);
ctx
.
beginPath
();
var
deltaX
=
clientX
-
disX
;
var
deltaY
=
clientY
-
disY
;
circle
.
x
=
deltaX
;
circle
.
y
=
deltaY
;
ctx
.
arc
(
circle
.
x
,
circle
.
y
,
circle
.
r
,
0
,
2
*
Math
.
PI
,
false
);
ctx
.
fill
();
}
oC
.
onmouseup
=
function
()
{
oC
.
onmousemove
=
null
;
oC
.
onmouseup
=
null
;
}
}
}
</script>
(6) 应用 下载canvas绘图
<canvas
width
=
"600"
height
=
"400"
></canvas>
<br>
<button>
Download
</button>
<script>
var
oC
=
document
.
querySelector
(
'canvas'
);
var
ctx
=
oC
.
getContext
(
'2d'
);
var
oBtn
=
document
.
querySelector
(
'button'
);
var
data
=
[
rnd
(
100
,
1000
),
rnd
(
100
,
1000
),
rnd
(
100
,
1000
),
rnd
(
100
,
1000
),
rnd
(
100
,
1000
)
]
var
start
=
0
;
var
sum
=
sumUp
(
data
);
data
.
forEach
(
function
(
number
,
index
)
{
var
color
=
`
rgb
(
$
{
rnd
(
0
,
255
)},
$
{
rnd
(
0
,
255
)},
$
{
rnd
(
0
,
255
)})`;
var
delta
=
number
/
sum
*
2
*
Math
.
PI
;
ctx
.
fillStyle
=
color
;
ctx
.
beginPath
();
ctx
.
moveTo
(
300
,
200
)
ctx
.
arc
(
300
,
200
,
100
,
start
,
start
+
delta
,
false
);
ctx
.
lineTo
(
300
,
200
)
ctx
.
fill
();
start
=
start
+
delta
;
})
function
sumUp
(
array
)
{
var
sum
=
0
;
array
.
forEach
(
function
(
n
)
{
sum
+=
n
})
return
sum
;
}
function
rnd
(
n
,
m
)
{
return
parseInt
(
Math
.
random
()
*
(
m
-
n
)
+
n
);
}
// **下载canvas图片
oBtn
.
onclick
=
function
()
{
var
oA
=
document
.
createElement
(
'a'
);
oA
.
href
=
oC
.
toDataURL
();
oA
.
download
=
'默认命名'
;
// oA.download = fileName.value ? fileName.value : '默认命名' + '.png';
oA
.
click
();
}
</script>
(7) 应用 canvas运动回调
<script>
function
loadStatics
(
statics
,
callback
)
{
var
count
=
0
;
statics
.
forEach
(
function
(
path
,
index
)
{
var
oImage
=
new
Image
();
oImage
.
src
=
`
img
/
$
{
path
}.
png
`
resources
[
path
]
=
oImage
;
oImage
.
onload
=
function
()
{
count
++
if
(
count
==
statics
.
length
)
{
callback
&&
callback
();
}
}
})
}
function
d2a
(
d
)
{
return
d
/
180
*
Math
.
PI
}
function
a2d
(
a
)
{
return
a
/
Math
.
PI
*
180
}
function
rnd
(
n
,
m
)
{
return
parseInt
(
Math
.
random
()
*
(
m
-
n
)
+
n
)
}
function
rndSign
()
{
return
Math
.
random
()
<
0.5
?
-
1
:
1
}
</script>
(8) canvas框架 jCanvaScript.js
jCanvaScript.js
示例
<canvas
id
=
"c1"
width
=
"500"
height
=
"500"
></canvas>
<script
src
=
"libs/jCanvaScript.1.5.18.min.js"
></script>
<script>
var
idCanvas
=
"c1"
;
onload_1
();
var
interval_1
=
0
;
function
startShow
()
{
var
r
=
Math
.
floor
(
Math
.
random
()
*
(
254
)),
g
=
Math
.
floor
(
Math
.
random
()
*
(
254
)),
b
=
Math
.
floor
(
Math
.
random
()
*
(
254
)),
x
=
Math
.
floor
(
Math
.
random
()
*
(
439
)),
y
=
Math
.
floor
(
Math
.
random
()
*
(
554
)),
color
=
"rgba("
+
r
+
", "
+
g
+
", "
+
b
+
", 0.5)"
,
filled
=
true
,
radius
=
1
;
jc
.
circle
(
x
,
y
,
radius
,
color
,
filled
)
.
animate
({
radius
:
100
,
opacity
:
0
},
1500
,
function
()
{
this
.
del
();
});
}
function
onload_1
()
{
jc
.
start
(
idCanvas
,
true
);
interval_1
=
setInterval
(
startShow
,
200
);
}
function
start_1
(
idCanvas
)
{
if
(
interval_1
)
return
;
onload_1
();
}
function
stop_1
(
idCanvas
)
{
clearInterval
(
interval_1
);
interval_1
=
0
;
jc
.
clear
(
idCanvas
);
}
</script>
