网站建设资讯

NEWS

网站建设资讯

如何使用HTML5的Canvas来绘制图形-创新互联

如何使用HTML5的Canvas来绘制图形?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。

创新互联建站服务项目包括深泽网站建设、深泽网站制作、深泽网页制作以及深泽网络营销策划等。多年来,我们专注于互联网行业,利用自身积累的技术优势、行业经验、深度合作伙伴关系等,向广大中小型企业、政府机构等提供互联网行业的解决方案,深泽网站推广取得了明显的社会效益与经济效益。目前,我们服务的客户以成都为中心已经辐射到深泽省份的部分城市,未来相信会继续扩大服务区域并继续获得客户的支持与信任!一、Canvas标签:

1、HTML5元素用于图形的绘制,通过脚本(通常是javascript)来完成。

2、标签只是图形容器,必须使用脚本来绘制图形。

3、可以通过多种方法通过Canvas绘制路径、盒、圆、字符以及添加图像。

二、Canvas绘制图形1、绘制矩形

如何使用HTML5的Canvas来绘制图形如何使用HTML5的Canvas来绘制图形


2、绘制圆形

如何使用HTML5的Canvas来绘制图形如何使用HTML5的Canvas来绘制图形

3、moveTo和lineTo

如何使用HTML5的Canvas来绘制图形如何使用HTML5的Canvas来绘制图形

4、使用bezierCurveTo绘制贝塞尔曲线

如何使用HTML5的Canvas来绘制图形

如何使用HTML5的Canvas来绘制图形

5、绘制线性渐变

如何使用HTML5的Canvas来绘制图形如何使用HTML5的Canvas来绘制图形

如何使用HTML5的Canvas来绘制图形如何使用HTML5的Canvas来绘制图形

如何使用HTML5的Canvas来绘制图形如何使用HTML5的Canvas来绘制图形

6、绘制径向渐变

如何使用HTML5的Canvas来绘制图形如何使用HTML5的Canvas来绘制图形

7、绘制变形图形

如何使用HTML5的Canvas来绘制图形如何使用HTML5的Canvas来绘制图形

8、绘制图形合成gloablCompositeOperation属性

使用不同的 globalCompositeOperation 值绘制矩形。橙色矩形是目标图像。粉色矩形是源图像。

定义和用法

globalCompositeOperation属性设置或返回如何将一个源(新的)图像绘制到目标(已有)的图像上。

源图像 = 您打算放置到画布上的绘图。

目标图像 = 您已经放置在画布上的绘图。

属性值:
属性
source-atop
在先绘制的图形顶部显示后绘制的图形。后绘制的图形位于先绘制的图形之外的部分是不可见的。
source-in只绘制相交部分,由后绘制图形的填充覆盖,其余部分透明。
source-out只绘制后绘制图形不相交的部分,由后绘制图形的填充覆盖,其余部分透明。
source-over在先绘制的图形上显示后绘制的图形。相交部分由后绘制的图形填充(颜色,渐变,纹理)覆盖
destination-atop在后绘制的图形顶部显示先绘制的图形。源图像之外的目标图像部分不会被显示。
destination-in在后绘制的图形中显示先绘制的图形。只绘制相交部分,由先绘制图形的填充覆盖,其余部分透明
destination-out只有后绘制的图形外的目标图像部分会被显示,源图像是透明的。
destination-over相交部分由先绘制图形的填充(颜色,渐变,纹理)覆盖.
lighter相交部分由根据先后图形填充来增加亮度。
copy
显示后绘制的图形。只绘制后绘制图形。
xor相交部分透明

如何使用HTML5的Canvas来绘制图形

以上效果图的代码如下:




    
    
    
    


图形合成

9、给图形绘制阴影

如何使用HTML5的Canvas来绘制图形

代码如下:




    
    canvas基础api
    
    
    


    您的浏览器不支持canvas

五角星阴影

10、canvas使用图像

语法:ctx.drawImage(imgobj,left,top,width,height)

如何使用HTML5的Canvas来绘制图形




    
    canvas基础api
    
    
    


    您的浏览器不支持canvas

看完上述内容,你们掌握如何使用HTML5的Canvas来绘制图形的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注创新互联网站制作公司行业资讯频道,感谢各位的阅读!


分享文章:如何使用HTML5的Canvas来绘制图形-创新互联
转载注明:http://njwzjz.com/article/ceiggh.html