zoukankan      html  css  js  c++  java
  • 怎么入门html5绘制图形?你需要了解这几点!

    html5中是怎么实现绘制图形?

    html5中可以实现绘画图形的功能,需要注意的是html5只提供2D,不提供3D绘画功能。canvas元素是H5总新增的元素,它用来专门绘制图形。你也可以把canvas元素理解成一块“画布”,我们可以在其中绘制图形。在canvas元素中绘画不是拿鼠标来绘制图形,实际上在H5完成绘画功能,不仅仅需要canvas元素,而且需要JavaScript脚本来配合才能完成绘制图形。所以说把html5中的canvas元素理解成画布是是合适不过的。

    html5中的canvas元素

    canvas元素必须要指定id、width(宽)、height(高)属性,虽然canvas元素是H5中用来绘制的图形,但是它的放置放和其他的元素没有区别。比如说canvas id="myCanvas" width="200" height="100"是放置了一个200*100的canvas元素。

    html5中的常用的绘制图形

    绘制矩形

    创建canvas元素→取得上下文(使用canvas对象的getcontent方法获得上下文)→填充绘制边框→设定样式→指定线宽、颜色。代码如下图:

    怎么入门html5绘制图形?你需要了解这几点!

     

    可以用clearRect方法擦除指定区域的图形,使矩形区域颜色变透明,context.clearRect(x,y,width,height)。

    绘制圆形

    绘制圆形要比矩形复杂一点,需要使用到路径,创建图形路径→关闭路径→调用绘制方法、路径。代码如下:

    怎么入门html5绘制图形?你需要了解这几点!

     

    cxt.beginPath();是开始创建路径,有几次是循环创建路径,每次开始都需要调用beginPath()函数。

    cxt.arc(70,18,15,0,Math.PI*2,true);是是创建路径,使用了arc()方法,它的语法如下:

    怎么入门html5绘制图形?你需要了解这几点!

     

    cxt.closePath();cxt.fill();关闭绘画路径后调用绘制路径。最后给大家一个作业,你可以试试下面的代码在浏览器执行后会是什么图形?

    怎么入门html5绘制图形?你需要了解这几点!
  • 相关阅读:
    动手学习TCP:TCP连接建立与终止
    动手学习TCP: 环境搭建
    Python 数据分析4
    Django unittest 单元测试
    Django commands自定制
    Python mac安装mysqlclient的一个bug
    Centos7 开机启动流程
    Centos 06 文件类型和扩展名&索引节点inode和存储块block
    Centos 05 系统目录讲解
    Linux 踩过的坑系列-01
  • 原文地址:https://www.cnblogs.com/CQqf/p/10819322.html
Copyright © 2011-2022 走看看