> 웹 프론트엔드 > H5 튜토리얼 > HTML5 : 캔버스

HTML5 : 캔버스

高洛峰
풀어 주다: 2016-10-15 09:14:07
원래의
1584명이 탐색했습니다.

1.什么是canvas?

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

2.创建一个画布

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <canvas id="mycanvas" width="100" height="100"></canvas> //创建画布用canvas标签
</body>
</html>
로그인 후 복사

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>
로그인 후 복사

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();
로그인 후 복사

效果:

HTML5 : 캔버스

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿