Heim > Web-Frontend > H5-Tutorial > Hauptteil

html5:Leinwand

高洛峰
Freigeben: 2016-10-15 09:14:07
Original
1569 Leute haben es durchsucht

1.什么是canvas?

可以绘制图形的标签。一般用javascript来绘制。

2.创建一个画布

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <canvas id="mycanvas" width="100" height="100"></canvas> //创建画布用canvas标签
</body>
</html>
Nach dem Login kopieren

3.在画布上绘图。

<script type="text/javascript">
    //用javascript来绘制图像
    //获取到canvas元素
    var can=document.getElementById("mycanvas");
    //创建html5的内置对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
    var draw=can.getContext("2d");
    //fillStyle();可以是css的颜色,渐变,图案
    draw.fillStyle="red";
    //fillRect(x,y,width,height) 定义填充方式
    draw.fillRect(0,0,125,12);
    </script>
Nach dem Login kopieren

4.canvas-路径

var can=document.getElementById("mycanvas");
    var draw=can.getContext("2d");
    // 开始一个路径
    draw.beginPath();
    // 设置线的粗细
    draw.lineWidth="5";
    //设置线的颜色
    draw.strokeStyle="green";
    // 线的起点
    draw.moveTo(0,75);
    //线的终点 
    draw.lineTo(250,75);
    // 开始绘制路径
    draw.stroke();
    //开始另一个路径
    draw.beginPath();
    // 设置线的粗细
    draw.lineWidth="5";
    draw.strokeStyle="purple";
    draw.moveTo(25,05);
    draw.lineTo(35,25);
    draw.stroke();
Nach dem Login kopieren

效果:

html5:Leinwand

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage