html自学教程(九)终章

  • 时间:2018-07-01 23:37 作者:极客饕餮 来源:极客饕餮 阅读:349
  • 扫一扫,手机访问
摘要:一 html5 Canvas转换Canvas元素能被转换例如,在坐标(20,40)的画布上写入文本ctx.font="bold 20px Arial";ctx.textAlign="Hello World";ctx.fillText("Hello World",20,40);translate(x,
html自学教程(九)终章

一 html5 Canvas转换

Canvas元素能被转换

例如,在坐标(20,40)的画布上写入文本

ctx.font="bold 20px Arial";

ctx.textAlign="Hello World";

ctx.fillText("Hello World",20,40);

translate(x,y)方法使用于移动canvas.

x表示水平移动网格的距离,y表示垂直移动网格的距离

ctx.translate(100,500);

ctx.fillText("after translate",20,40)

在此例子中,画布向右移动100像素,向下移动500像素

rotate()方法使用于旋转html5画布

下面是设置旋转之前和之后绘制相同矩形的例子:

ctx.fillStyle="#FF0000";

ctx.fillRect(10,10,100,100);

ctx.rotate((Math.PI/180)*25); //rotate 25 degree

ctx.fillStyle="#0000FF";

ctx.fillRect(10,10,100,100);

scale()方法缩放当前绘图至更大或者更小.

注意:假如你对绘画进行缩放,所有之后的绘图也会被缩放.定位也会被缩放.假如你设置scale(2,2)那么绘图将定位于距离画布左上角两倍远的位置

实例

绘制一个矩形;放大到2倍,再次绘制矩形;放大到2倍,再次绘制矩形;放大到2倍,再次绘制矩形

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.strokeRect(5,5,25,15);

ctx.scale(2,2);

ctx.stokeRect(5,5,25,15);

ctx.scale(2,2);

ctx.strokeRect(5,5,25,15);

ctx.scale(2,2);

ctx.strokeRect(5,5,25,15);

二 html5表单一

html5位web表单创立带来了很多新特性,增加了多个新属性和输入类型,这些新特性提供了更好的输入控制和验证

html5中的表单创立方式与html一样:

placeholder属性

html5增加了一个名为placeholder的新属性.在

  • [展开所有评论]
  • 最新发布的资讯信息
    【系统环境|服务器应用】Discuz发布帖子时默认显示第一个主题分类的修改方法(2019-12-09 00:13)
    【系统环境|软件环境】Android | App内存优化 之 内存泄漏 要点概述 以及 处理实战(2019-12-04 14:27)
    【系统环境|软件环境】MySQL InnoDB 事务(2019-12-04 14:26)
    【系统环境|软件环境】vue-router(单页面应用控制中心)常见用法(2019-12-04 14:26)
    【系统环境|软件环境】Linux中的Kill命令(2019-12-04 14:26)
    【系统环境|软件环境】Linux 入门时必学60个文件解决命令(2019-12-04 14:26)
    【系统环境|软件环境】更新版ThreeJS 3D粒子波浪动画(2019-12-04 14:26)
    【系统环境|软件环境】前台开发WebStorm常用快捷键,火速收藏!(2019-12-04 14:25)
    【系统环境|软件环境】微博H5登录和发微博组件(2019-12-04 14:25)
    【系统环境|软件环境】5分钟谈前台面试,小伙伴都惊呆了(2019-12-04 14:23)