html自学教程(九)终章

  • 时间:2018-07-01 23:37 作者:极客饕餮 来源:极客饕餮 阅读:318
  • 扫一扫,手机访问
摘要:一 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的新属性.在

  • [展开所有评论]
  • 最新发布的资讯信息
    【系统环境|】WEB前端学习:JS实现中文简体繁体切换(2019-08-22 12:38)
    【系统环境|服务器应用】前台开发入门到实战:HTML5语义化元素你真的用的正确吗?(2019-08-22 04:16)
    【系统环境|服务器应用】Vue仿微信app页面跳转动画(2019-08-22 04:16)
    【系统环境|服务器应用】webstorm使用快捷键快速修正单个文件的style(2019-08-22 04:16)
    【系统环境|服务器应用】程序员从学生到阿里经历的5次蜕变:海阔凭鱼跃,天高任鸟飞(2019-08-22 04:16)
    【系统环境|服务器应用】var、let、const的区别(2019-08-22 04:16)
    【系统环境|服务器应用】mini-ui加载框Indicator 被遮挡问题(2019-08-22 04:15)
    【系统环境|服务器应用】【对讲机的那点事】玩对讲机,对于对讲机的亚音你理解吗?(2019-08-22 04:15)
    【系统环境|服务器应用】前台中高级面试,内功心法(上)(2019-08-22 04:15)
    【系统环境|服务器应用】17、改进轮播图之功能封装(2019-08-22 04:15)