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

最新推荐文章于 2024-08-11 21:37:15 发布
最新推荐文章于 2024-08-11 21:37:15 发布
阅读量642 收藏
点赞数
文章标签： 下载 应用 interval start var
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/oschina_39816388/article/details/80132306
版权
  • (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>
老姚666
关注
paint-canvas:使用HTML canvas的简单绘画实现
05-01
总结起来，"paint-canvas"项目涵盖了HTML5 canvas的基本使用、JavaScript事件处理、DOM操作和数据转换等知识点。它提供了一个实用的在线绘画应用实例，对于学习和实践Web前端开发，尤其是canvas绘图技术，是一个很好...
前端可视化——Canvas
mapbar_front的博客
03-12 7954
Canvas 基本使用 <canvas id="tutorial" width="300" height="300"></canvas> 1、canvas元素替换内容。 使用文本的方式 <canvas>你的浏览器不支持 canvas，请升级你的浏览器。</canvas> 使用图片的方式 <canvas><img src=...
【HTML】【一文全解Canvas】从初学到实战，彻底掌握前端绘图神器！
weixin_55846296的博客
06-09 1万+
前言一、Canvas 概述二、在 HTML 中使用 Canvas三、Canvas 绘制图形1、绘制矩形2、绘制圆形a. 绘制实心圆形b. 绘制空心圆形四、Canvas 绘制文本五、Canvas 绘制图片六、Canvas 动画效果1、setInterval() 实现动画2、requestAnimationFrame() 实现动画七、Canvas 使用注意事项八、利用Canvas绘制挂钟（原理-绘制弧形）- 简单练习1、 还原坐标系2、 绘制背景3、 绘制时钟指针4、循环绘制。
前端图形开发canvas入门
最新发布
weixin_53954018的博客
08-11 937
Canvas 是一种非常强大的技术，可以用于在网页上绘制图像、动画和其他视觉效果。Canvas 可以通过 JavaScript 进行控制，可以实现非常复杂的交互效果，而且它的性能也非常出色。在使用 Canvas 时，需要注意性能优化，避免频繁的绘制和 DOM 操作。
前端系列——Canvas
qq_51553982的博客
12-17 2376
canvas的用途有很多，常用于绘制各类图形，如我们常用的Echarts就是使用canvas构建的。canvas的默认大小为长：300px，宽：150px。使用drawImage函数。
【前端】【canvas详解 非常详细的使用方法】
PiPiFamily的博客
06-08 4495
canvas使用详细教学
前端 Canvas基础 （一）【基本图形】
前端、python爱好者
07-07 4395
canvas [ˈkænvəs] ：画布 这是一个HTML5新增的标签，使用这个标签我们可以通过JS在该标签中直接画出各种图形。这时，JS类似画家手中的画笔，canvas就相当于画家画笔下的画布。当然，如果只是画静态图，岂不是显得很low了，我们实际开发中用canvas比较多的肯定是用它做出来的各种动画。更多的介绍这里就不赘述了。下面我们看看在我自己开发网站中用到的一些canvas。很多的2D（2d）甚至3D（webgl）动画都靠它进行渲染。我们先看看两个图片例子吧(第一张登录页中使用了webgl【图片下
HTML5 canvas心电图动画代码.zip
05-14
在HTML5 Canvas上模拟心电图动画，开发者需要掌握以下几个关键知识点： 1. **路径绘制**：心电图由一系列连续的波形组成，可以通过Canvas的`beginPath()`开始一条新的路径，接着使用`moveTo()`移动到起点，然后使用...
详解Html5 Canvas画线有毛边解决方法
09-28
Html5 Canvas画线有毛边是一个在Web前端开发中常见的问题，特别是在使用Canvas 2D渲染图形时。这个问题主要是由于Canvas中坐标点与像素点...希望上述知识点能够帮助到正在学习和使用Canvas进行Web前端开发的朋友们。
HTML5 Canvas线性图表.zip
11-18
在HTML5 Canvas上实现线性图表，主要涉及以下知识点： 1. **Canvas元素**：HTML5引入的`<canvas>`元素是一个可编程的图形区域，可以通过JavaScript来控制其内容的绘制。 2. **Canvas API**：Canvas API提供了一...
html5 canvas圆形时钟代码.zip
11-18
接下来，我们将深入探讨相关知识点。 1. HTML5 Canvas API: HTML5 Canvas是一个基于矢量图形的元素，它通过JavaScript提供了一个二维绘图环境。通过调用Canvas上的方法，可以绘制线条、形状、图像等。例如，`...
前端canvas的学习和将网页生成canvas图片
动感超人的博客
03-12 2003
目标 最终可以实现二维码填充在指定图片位置,并且可以填充文字在图片中 学习笔记,个人记录, 学习掘金大佬德育处主任 https://juejin.cn/user/2673620576140030 专栏 https://juejin.cn/column/7113168145912692773 作者仓库 https://gitee.com/k21vin/thunder-monkey-canvas 第一个canvas <body> <canvas id="c"
前端提高篇(六十六)：HTML进阶7：canvas画布基本知识（一）
安之ccy的博客
03-21 860
1.canvas是html5中新提出的元素，相当于一个画布，可以在这个画布上绘制图形或动画 2.之前做的动画是用了好多个dom元素拼成图案，用js控制这些元素构成一个动画，而canvas提供了API，里面有很多相关的方法和属性，js通过使用这些方法、属性来绘制图案或制作动画，图案和动画都只在canvas这一个元素上操作，就像画布一样，容纳很多图案 3.如果一个动画比较复杂，首先应该考虑用canvas，用原先的js来绘制，浏览器需要对大量的dom元素进行重排、重绘、计算、渲染操作，而用canvas来做，就只要
前端canvas项目实战——在线图文编辑器(三)：线条宽度&样式
石沉溪洞
01-28 1151
上一篇博文中，我们初步实现了右侧属性栏，通过属性栏，我们可以便捷得修改画布中对象的颜色相关属性。 这篇博文是《前端canvas项目实战——简历制作网站》付费专栏系列博文的第三篇——右侧属性栏(线条宽度&样式)，主要的内容有： 1. 针对线条对象：扩充属性列表，使用户可以修改画布中选中的线条的宽度和样式（实线、虚线、点线等）
Web前端学习笔记——Canvas 01
唯恋殊雨的博客
03-22 999
一、canvas简介1.1 什么是canvas？（了解）是HTML5提供的一种新标签 &lt;canvas&gt;&lt;/canvas&gt; 英 ['kænvəs] 美 ['kænvəs] 帆布 画布Canvas是一个矩形区域的画布，可以用JavaScript在上面绘画。控制其每一个像素。canvas 标签使用 JavaScript 在网页上绘制图像，本身不具备绘图功能。canvas 拥有多种...
前端装逼必备--Canvas
热门推荐
西伯利亚狼
09-23 2万+
如果写代码不是为了装逼，那人生将毫无意义。都2020年了，如果你从事前端开发，连canvas都不会用，那你拿啥去装逼？下面跟着笔者一起来看看canvas是啥，可以用来做啥，有哪些产品是canvas做出来的。 Canvas介绍 1.canvas是html5的一个新标签，属于h5的新特性 2.canvas标签是一个图形的容器，简单点说就是一块画布，你可以在上画矩形，圆形，三角形，折线等等,也可以用来画logo 3.它是通过javascript来画的，即脚本绘制图形 canvas可以用来干啥呢？ 1.制作we
五分钟学会 Canvas 基础（一）
Tox-boy的博客
07-18 3892
0.前言 最近忙里偷闲，来写的这篇文章，但是中午出去吃个饭，回来因为自己的误操作，把上午的文章全删除了，还没法找回。 小编真的是瞬间觉得整个人生都灰暗了。 心塞，这次真的不想多说什么了。 ————-我是华丽的分割线————– 终于把这篇文章写完了，关于本文，针对读者主要是之前从未接触过 Canvas的同学。当然，你要学 canvas 一定要有 JS 基础啦。 其
前端面试题整理（一）
二琳爱吃肉的博客
06-27 1497
Canvas的基础定义Canvas是HTML5新增的元素，是由HTML代码配合高度和宽度属性而定义出的一个绘制区域，我们可以使用JavaScript在Canvas内部进行绘制。Canvas只有两个可选属性，一个是宽度width，一个高度height。如果你不设置宽高的话，默认的宽度width是300px,height是150px;我们也可以使用css来设置canvas的宽高，但如果设置的宽高和初始宽高比例不一致的话，就会出现扭曲现象。100 Continue 一般发生在post请求是，发送了HTTP hea
HTML5 Canvas深度教程：绘图与应用解析
这个HTML5 Canvas教程主要涵盖了以下几个关键知识点： 1. **基本用法**：`<canvas>`元素的声明类似于`<img>`元素，但没有`src`和`alt`属性。`<canvas>`有两个主要属性，即`width`和`height`，它们分别定义了画布的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值