首页 > 课程库 > HTML5绘图
HTML5绘图

HTML5绘图

HTML5提供了Canvas元素,允许脚本语言动态渲染位图像。Canvas由一个可绘制地区HTML代码中的属性定义决定高度和宽度。JavaScript代码可以访问该地区,通过一套完整的绘图功能类似于其他通用二维的API,从而生成动态的图形。本课程详细讲解了HTML5绘图的基本方法,包括文字、路径、图像和渐变等内容,最后以一个单机版的五子棋项目来证明HTML5绘图功能的强大。

Web前端开发

14章节|19968次播放

查看课程视频学习交流群
486792092

3小时学习时长
更全面的职业课程大纲立即查看
  • 学习HTML5

    HTML5绘图基础

    HTML5绘图属于HTML5里面的一部分,这个课程只给大家讲HTML5绘图的api。那这一小节呢!我们看HTML5绘图的基础。HTML5绘图基础1.在HTML5以前的时代,前端开发者无法在HTML页面上动态地绘制图片。如果想要在前端动态的画出图片,我们就需要后端的服务器来生成图片,不断的修改前端的D... 查看原文

  • 学习HTML5

    画图程序

    开发工具:我是用的是HBuilder。大家可以使用像记事本一样,dreamware一样的工具,都可以。1.我们新建一个HTML5的项目,命名为html5_canvas2. 我们打开这个项目,里面有一个默认的index.html文件,打开之后,这里面就是一个HTML5的结构,在它上面进行画图。3. 首... 查看原文

  • 学习HTML5

    HTML5绘制几何图形

    HTML5绘制几何图形的两个方法1. filleRect(float x,float y,float width,float,height)它是填充一个矩形2. strokeRect(float x,float y,float width,float,height)它是画一个空心的矩形。HTML5并... 查看原文

  • 学习HTML5

    HTML5绘制字符串

    对象(CanvasRenderingContext2D),我们都把它叫做ctx,绘图主要用这个对象的API来进行。绘制文字的两个方法1.fillText(String text,float x,float y,[float maxwidth]):填充字符串凡是有fill,就是填充一个实心的字符串。这... 查看原文

  • 学习HTML5

    HTML5设置阴影

    设置阴影涉及到4个属性1. shadowBlur:阴影模糊度,浮点数越大越模糊。2. shasowColor:阴影颜色。3. shadowOffsetX: x方向的偏移4. shadowOffsetY: y方向的偏移代码演示:文字设置阴影1.  复制一下index4.html,重命名为index5.... 查看原文

  • 学习HTML5

    HTML5画直线

    Ctx绘制路径的步骤是以下4步1. 调用CanvasRenderingContext2D对象的beginPath()方法开始定义路径。2. 调用CanvasRenderingContext2D的各种方法添加路径,比如添加一段弧或者贝赛尔曲线。3. 调用CanvasRenderingContext2D... 查看原文

  • 学习HTML5

    HTML5画弧线

    arc()不只是可以画弧,因为圆也算由弧构成,所以画圆也可能用到它。 写个程序来画圆注意我们画图的方式是这样的,beginPath。然后在设置完路径之后,closePath最后才是正式绘制(填充)之前设置的路径。那我们现在来看这个arc是怎么用的?这里面有几个参数1) 第一个是中心坐标的x坐标,因为... 查看原文

  • 学习HTML5

    HTML5画切线间的弧

    arc()方法是绘制一个圆以及圆的一部分。arcTo()方法在画布上创建介于两个切线之间的弧/曲线原理演示1.  启动画图工具2. 先把路径移动到这个点,然后从这个点到另外一个点画一条线3. 画了一条线之后,再来一个点,也就是拿3个点来确定的一个弧4. 这个弧就是它俩的切线代码演示:arcTo()方... 查看原文

  • 学习HTML5

    三次贝赛尔曲线绘制

    查看HTML5的参考手册(三次贝赛尔曲线)这有一个图表示的很形象我们要画这样的一个曲线,有4个点来决定的1) 第一个点是控制点的开始。(20*20)2) 第二个点是(20*100)。3) 第三个点是控制点2(200*100)4) 第四个点是结束点(200*20)注意这是两条切线,然后这样的组成的一条... 查看原文

  • 学习HTML5

    二次贝赛尔曲线绘制

    二次贝赛尔曲线怎么用1) 这里有开始点(20,20),控制点(20,100),结束点(200,20)。2) 这个就是拿两条线来确定一个弧线,但是这个弧线。之前我们学过两条切线中间的这个是圆,圆的话是要指定半径的。这个地方是不用半径来控制一条线。代码演示:二次贝赛尔曲线的使用如何确定方法参数坐标点?1... 查看原文

  • 学习HTML5

    HTML5线性渐变

    HTML5支持的填充有3种渐变1. 一种叫线性渐变 • 线性渐变– CanvasGradient代表渐变填充– CanvasPattern代表位团填充• 使用渐变步骤– step1:ctx.createLinearGradient(x,y,xend,yend)返回CavasGradient对象– s... 查看原文

  • 学习HTML5

    圆形渐变

    代码演示:如何使用圆形渐变我们查看一下这个API文档,这里详细解释了创建圆形渐变的方法的几个参数。我们写代码为:运行看看结果圆形渐变的原理1) 它产生的这个圆,第一个圆心是70,50。假如这个坐标点在这儿:这个半径是5,这就是第一个圆。2) 那第二个圆的圆心是90,60。假如圆心在这里。它的半径是1... 查看原文

  • 学习HTML5

    HTML5绘制位图

    HTML5绘图主要用到一个方法就是drawImage(Image image,x,y)。这里面的参数是比较多。1) img 规定要使用的图像、画布或视频。是要画制Image对象的一个DOM对象。2) sx 可选。开始剪切的 x 坐标位置。3) sy 可选。开始剪切的 y 坐标位置。4) swidth... 查看原文

  • 学习HTML5

    初始化棋盘

    最后我们给大家做一个综合的实例,就是我们使用HTML5来实现一个简单的五子棋。前期准备用到的素材,3张图片。一个黑子,一个白字,一个棋盘背景。所以把这3个背景图片做一个复制,粘贴到HBuilder里面,放到Image里面去。代码演示1.新建一个文件,命名为game.html2.首先新建一个画板,把它... 查看原文

  • 学习HTML5

    算出下棋的坐标

    这节我们来做一个案例:点击一下棋盘,就在棋盘上落下一个子。代码演示定义两个全局变量,然后给这两个全局变量指向两个图片对象这两个变量分别指向 白子和黑子这两张图片。var black=new Image();var white=new Image();black.src="img/black.png"... 查看原文

  • 学习HTML5

    五子棋输赢算法

    在上一小节中,我们实现了五子棋的画子,在这一节我们实现五子棋输赢的算法。我们接下来要做的就是,当下满5个白子或者5个黑子的时候,让它赢。水平方向上的输赢其实我们每点击一次棋盘落子,都把这个棋子的信息记录在了这个maps里面了。当我们每次点击一个鼠标下子的时候,都要判断一下,这个数组的横向黑子或者是白... 查看原文

  • 学习HTML5

    HTML5绘图总结

    HTML5的绘图基础 • 在HTML5以前的时代,前端开发者无法在HTML页面上动态地绘制图片• HTM5新增了一个<canvas../>元素,相当于一个画布,可以获得一个CanvasRenderingContext2D对象• CanvasRenderingContext2D提供了很多画图API H... 查看原文

  • 源代码所属章节:源代码
    下载
Web前端开发刘慧涛

刘慧涛

TA的课程

潜心钻研网络技术10余年,8年软件开发与网站架构经验,精通web前端技术、Java EE、B/S结构软件开发流程与管理,RedCMS开源项目创始人。

更专业的职业课程

Web前端开发22734位同学正在学习

Web前端开发

一名课程顾问想与您沟通

免费电话咨询