HTML5绘图

课程导师

雷晋宁 雷晋宁
曾任职千行集团的Web前端核心开发,精通高安防的Web前端研发,主导开发过最高人民法院安全项目,具有多年项目研发经验。
00:00:00
Play
Next
00:00 / 00:00
40%
  • 2x
  • 1.5x
  • 1.25x
  • 1x
1x
1.HTML5绘图基础
离线学习

下载APP离线观看

技能补充更多
  • Java 语言基础
    Java 语言基础

    学习Java基本语法、变量、流程控制、修饰符、修饰符、继承、抽象、接口、数组、异常。

  • HTML5+CSS3快速入门
    HTML5+CSS3快速入门

    HTML5+CSS3是web前端开发的常用基础语言之一,本章将分别从html5相关元素及应用、css3相关元素及应用及html5+css3实战等方面进行介绍,快速入门html5+css3。

  • Javascript初步
    Javascript初步

    Javascript是web前端开发常用技术之一,也是web前端开发必学技术之一,本章麦子学院原创JavaScript视频教程,将围绕其相关基础知识和实际应用全面讲解,让你轻松掌握并精通JavaScript的使用。

  • Web前端开发之Ajax初步
    Web前端开发之Ajax初步

    麦子学院原创web前端开发常用技术 — ajax视频教程, 主要从ajax的运行环境、元素的应用、及其数据类型的运用等方面进行介绍和实战,让学员能快速入门并精通ajax的使用。

  • 最新问答
  • WIKI资料
  • 课件下载
只看我参与的
  • 18328332851 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...

  • 源代码

    源代码

© 2012-2016 www.maiziedu.com

蜀ICP备13014270号-4 Version 5.0.0 release20160127

一名课程顾问想与您沟通

免费电话咨询