H5 Canvas 绘图

一、什么是Canvas

Canvas 是H5的一部分,允许脚本语言动态渲染图像。Canvas定义一个区域,可以由html属性定义该区域的宽高,JavaScript代码可以访问该区域,通过一整套完整的绘图功能(API),在网页上渲染动态效果图。

二、Canvas能做什么

  1. 游戏:毫无疑问,游戏在HTML5领域具有举足轻重的地位。HTML5在基于Web的图像显示方面比Flash更加立体、更加精巧。

  2. 图表制作:图表制作时常被人们忽略,但无论企业内部还是企业间交流合作都离不开图表。现在一些开发者使用HTML/CSS完成图标制作。当然,使用SVG(可缩放矢量图形)来完成图表制作也是非常好的方法。

  3. 字体设计:对于字体的自定义渲染将完全可以基于Web,使用HTML5技术进行实现。

  4. 图形编辑器:图形编辑器能够100%基于Web实现。

  5. 其他可嵌入网站的内容:类似图表、音频、视频,还有许多元素能够更好地与Web融合,并且不需要任何插件。

三、Canvas基本用法

3.1 使用Canvas必须先设置其width、height属性,指定可绘图区域大小。不指定的情况默认大小 为300X150 背景透明。

<canvas id="myCanvas" style="width: 300px;height: 200px;border:  1px solid red;">canvas>

H5 Canvas 绘图_第1张图片

 

 3.2 绘制一个带粉色的矩形框

绘制图像的话,我们首先要取到canvas并调用getContext()方法,然后传入上下文名字(2D/3D),2D有两种基本绘图操作|填充(fillStyle)|描边(strokeStyle)|,这两个属性默认值为#000。

        

H5 Canvas 绘图_第2张图片

 

 3.3绘制路径

3.3.1 beginPath():新建一条路径,一旦创建成功,图形绘制命令被指向到路径上生成路径

3.3.2 moveTo(x,y):将画笔移动到指定坐标,类似起点

3.3.3 lineTo(x,y) :将画笔移动到结束坐标,类似终点

3.3.4 closePath():闭合路径

 

DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>title>
    head>
    <body>
        <canvas id="myCanvas" style="border:  1px solid red;">canvas>
    
        <script >
             var myCanvas=document.querySelector("#myCanvas");
             myCanvas.width="500";
             myCanvas.height="300";
             var  cxt=myCanvas.getContext("2d");
             
    
//             moveTo(x,y) 定义线条开始坐标
//             lineTo(x,y) 定义线条结束坐标
            //画三角形
             cxt.moveTo(50,50);
             cxt.lineTo(250,100);
             cxt.lineTo(

你可能感兴趣的:(javascript,ViewUI)