HTML5 canvas画布

HTML的<canvas>元素用来在网页上绘制图形.

左边的图形都是用<canvas>绘制的.显示了四个元素:红色的矩形,渐变矩形,多颜色矩形,五彩斑斓的文字.

HTML的canvas是什么？

HTML的<canvas>元素用来绘制图形,通常用脚本进行绘制(一般用JavaScript).

<canvas>元素只是图形的一个容器.事实上你必须用脚本来绘制图形.

canvas有好几种方法来绘制路径.盒子,圆形,文字和添加图片.

canvas例子

canvas是HTML页面中的一块矩形区域.默认情况下,canvas没有边框和内容.

标签看起来像这样:

<canvas id="myCanvas" width="200" height="100"></canvas>

注意:要一直指定id属性(在脚本里获取元素需要使用),还要指定canvas的宽度和高度.

添加边框,可以用style属性:

基本的canvas例子:

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>

用JavaScript绘制:

<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);
</script>

绘制线条:

<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
</script>

绘制圆:

<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
</script>

绘制文字:

<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("你好,世界",10,50);
</script>

文字描边:

<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("你好,世界",10,50);
</script>

绘制线性渐变:

<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

// 创建渐变
var grd = ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// 渐变填充
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80);
</script>

绘制圆形渐变:

<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

// 创建渐变
var grd = ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// 渐变填充
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80);
</script>

绘制图片:

<img id='scream' style="width:100px;" src='/public/images/example_one.jpg' />
<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img,10,10);
</script>

HTMLcanvas教程

学习HTML的<canvas>完整教程,请访问我们完整的HTML canvas教程

评论区

21技术 www.21xrx.com 备案号：蜀ICP备17043188号-2

其它

提取图片文字免费的JetBrains license services json在线解析 base64加解密文章搜索