8个前端知识点:HTML5(canvas应用)

字数 141阅读 26
  • (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>

推荐阅读更多精彩内容