HTML5初探,如何使用Canvas绘制图像?!
author:一佰互联 2019-03-30   click:191

简介:初识canvas元素HTML5新增了一个元素canvas,用于绘图使用,其实它的表现和div比较接近(其实他应该属于inline-block),而提供了许多接口,从而轻易的绘制矩形框、圆三角形等关于HTML5新增元素初学者对HTML5的认知 ...

初识canvas元素

HTML5新增了一个元素canvas,用于绘图使用,其实它的表现和div比较接近(其实他应该属于inline-block),而提供了许多接口,从而轻易的绘制矩形框、圆三角形等
关于HTML5新增元素
初学者对HTML5的认知,可能觉得两者之间没多大的区别,无非是增加了点新东西。HTML5为我们带来的真正意义是:我们可以用javascript做更多的事情了;我们可以用javascript实现更好的产品了。比如HTML5就解决了我们头疼的跨域问题、实时通信API、他让我们用网页开发游戏变成可能

绘制矩形框

问题:定义样式与定义height与width

HTML5初探,如何使用Canvas绘制图像?!

HTML5初探,如何使用Canvas绘制图像?!

style定义宽高

HTML5初探,如何使用Canvas绘制图像?!

HTML5初探,如何使用Canvas绘制图像?!

可以看到,对于canvas来说,还是直接定义宽高的好,不需要用style定义
好了,现在我们再来看看绘制矩形这个方法:
1、使用getElementById方法获取绘制对象2、取得上下文getContext("2d"),这都是固定的写法3、指定填充的颜色fillStyle和绘制的颜色strokeStyle,即里面的颜色和边框的颜色4、指定线宽linewidth5、填充/绘制 fillRect/strokeRect 参数为 x,y,width,height6、若是要使其中一块透明,使用clearRect

绘制圆形

HTML5初探,如何使用Canvas绘制图像?!

HTML5初探,如何使用Canvas绘制图像?!

我们来看看绘制圆过程中其它地方都没有问题,但是创建圆路径这块值得考虑:arc方法参数很多,依次是:
xy半径开始弧度(我们一般喜欢角度,所以要转换)结束弧度顺时针或者逆时针
主要这个开始角度和结束角度我们来研究下,

HTML5初探,如何使用Canvas绘制图像?!

HTML5初探,如何使用Canvas绘制图像?!


moveTo与lineTo

两次moveto

HTML5初探,如何使用Canvas绘制图像?!

HTML5初探,如何使用Canvas绘制图像?!

一次moveto

HTML5初探,如何使用Canvas绘制图像?!

HTML5初探,如何使用Canvas绘制图像?!

三次moveto

HTML5初探,如何使用Canvas绘制图像?!

HTML5初探,如何使用Canvas绘制图像?!

我认为,使用moveto后相当于新开一起点,之前的一笔勾销,若是只使用lineto的话,他会将几个点连成线,若是可以组成图形便会拥有中间色彩本文仅代表作者个人观点,不代表巅云官方发声,对观点有疑义请先联系作者本人进行修改,若内容非法请联系平台管理员,邮箱2522407257@qq.com。更多相关资讯,请到巅云www.yinxi.net学习互联网营销技术请到巅云建站www.yx10011.com。