吾知网

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 1226|回复: 0

HTML5- Canvas入门

[复制链接]
发表于 2018-2-26 13:58:18 | 显示全部楼层 |阅读模式
canvas其实没有那么玄乎,它不外乎是一个H5的标签,跟其它HTML标签如出一辙:

<canvas></canvas>

canvas本身没有任何的绘图能力,所有的绘图工作都是通过js来实现的。通常我们在js通过getElementById来获取要操作的canvas(这意味着咱得给canvas设个id):


<canvas id="myCanvas"></canvas>
<script>
var c = document.getElementById("myCanvas"); //获取要操作的canvas
//操作canvas的代码...
</script>

注意最好在一开始的时候就给canvas设置好其宽高(若不设定宽高,浏览器会默认设置canvas大小为宽300、高100像素),而且不能使用css来设置(会被拉伸),建议直接写于canvas标签内部:

<canvas id="myCanvas" width="200" height="200"></canvas>

HTML5- Canvas入门(一)
摘要: 周老虎落网的时候,网易跟腾讯都推出了牛逼轰轰的HTML5页面来展示其关系网(网易http://news.163.com/special/data_zyk/ ,腾讯http://news.qq.com/zt2014/zykgxw/index.htm),查看这俩页面,都是通过H5中canvas强大的绘图...阅读全文




HTML5- Canvas入门(二)
摘要: 上篇文章我们了解了canvas的定义、获取和基础的绘图操作,其中的绘图功能我们讲解了线段绘制、上色、描边等方面知识点。今天我们来讲讲矩形(Rectangle)和多边形的绘制。矩形的绘制一共有两个口令,分别是 ctx.fillRect(x, y, width, height) 和 ctx.stroke...阅读全文




HTML5- Canvas入门(三)
摘要: 前两章我们掌握了线段、矩形和多边形的绘制方法,今天我们主要是学习如何绘制圆弧和贝塞尔曲线。圆弧的绘制圆弧可以理解为一个圆上的某部分线段,在canvas中,绘制一条圆弧的语法如下:ctx.arc( 圆心x坐标, 圆心y坐标, 圆的半径r , 开始角度, 结束角度 );其中的 “开始角度” 和 “结束角...阅读全文


HTML5- Canvas入门(四)
摘要: 前几章我们学习了矩形、多边形、圆形、曲线等图形的绘制,今天来学习下更简单一些的文本绘制及其各种功能方法。在canvas中我们可以通过strokeText() 和 fillText() 来绘制描边文本或者实心文本:您的浏览器不支持canvas,建议使用最新版的ChromestrokeText() 和 ...阅读全文




HTML5- Canvas入门(五)
摘要: 今天要介绍的是canvas对图形对象的操作,包括图像、视频绘制,和操作像素对象的方法。图片/视频的绘制在canvas中,我们可以通过drawImage() 的方法来绘制图片或视频文件,其语法为:ctx.drawImage( img, clip_x,clip_y,clip_w,clip_h, x, y...阅读全文


HTML5- Canvas入门(六)
摘要: 已经第六章了,也差不多接近尾声,如果你从第一章耐心follow到本章结束,那你便能掌握canvas的大部分知识点(当然如果要精通,还是得多靠练习,做一些小案例)。今天我们要学习的是canvas的变形转换方法。缩放方法scale()在canvas中,如果我们需要缩放当前绘图对象,可以利用 scale(...阅读全文







HTML5- Canvas入门(七)
摘要: 这是本系列的最后一篇入门文章,主要是对剩余的未说明的canvas方法来逐个介绍。首先,如果你是一名擅长矢量设计的设计师,对Illustrator或者Fireworks很熟悉的话,那你肯定知道它们有一个很强大的矢量混合处理功能,可以对多个矢量路径进行“合并”、“拆分”、“结合”、“相交”等系列操作。 ...阅读全文






您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|吾知网 ( 粤ICP备13013563号-1 )

GMT+8, 2019-10-24 11:55 , Processed in 1.109383 second(s), 8 queries , Memcache On.

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表