HTML5
关注
分享
扫一扫
文章平均质量分 57
大叶豌豆
人生百年，开心就好，O(∩_∩)O哈哈~
展开
-
html5新增标签canvas画布基础详解及实操案例（上）
如果文章有不对之处，还请大神们多多指点 canvas也是html中的一个元素，可以给这个元素添加一些html属性，属性width默认为300px，heigth默认为150px； canvas是h5中新增的众多元素中的一个，直译过来叫做画布，可以用来通过h5绘制一些图形效果； 刚开始的时候只是知道是用来做一些图形效果的，但是后来了解到canvas的强大 可以制原创 2017-10-08 20:32:01 · 2663 阅读 · 0 评论 -
canvas实现实时钟表代码实例（面向对象编程）
今天我们用canvas画布实现一个钟表的效果，效果简单，望大神勿喷！ 面向对象编程是js编程的核心，这个例子是想让我们理解一下面向编程的基本思路。1.面向对象编程思想的思路： 1.在开始的时候，定义一个构造函数，并且在构造函数中，调用init方法，调用他是为了实现所有的功能 注：如果构造函数有实参传入，那么就要先把传入的实参一一绑定给构造函数原创 2017-10-22 18:18:37 · 604 阅读 · 0 评论 -
canvas translate()方法实例及效果
canvas中很多的变换效果常用的就是translate()、rotate()和scale() 今天就来说一下translate() translate(x,y)方法重新映射画布上的 (0,0) 位置。也就是画布的平移 参数：x：X轴的偏移量 y：Y轴的偏移量 因为位置的平移是针对画布的，所以一般，我们绘制的图形都会受到平移的影响特别注意：clearRect()也会受到原创 2017-10-14 16:29:36 · 15401 阅读 · 0 评论 -
canvas save()和canvas restore()状态的保存和恢复使用方法及实例
新的一天又来啦，最近这些天一直是阴雨连绵的，也是醉了，不过还好今天终于可以看到灿烂的阳光了，现在这种温度，最喜欢站在太阳下晒着太阳，身上暖暖的，心情也会好很好，o(￣︶￣)o 好啦，不扯这些闲篇了，进入正题吧，今天分享下 canvas.save()和canvas.restore()状态的保存和恢复使用方法及实例canvas.save()用来保存先前状态的 canvas.restore()用来恢原创 2017-10-13 21:03:03 · 6905 阅读 · 1 评论 -
canvas rotate()画布的旋转详解
刚才还是风和日丽的天，这没一会会就乌云密布了，雨呀，眼瞅就下来了呢，一场秋雨一场寒，感觉懂得要穿棉袄了的节奏 10月1号之前，还是T恤呢，10月放完国庆节和中秋节以后就开始毛衣、毛衫、毛外套了，这真的是8天过了一个季节呀~~~ 大概北方的秋天都是这么快的吧 继续来看看canvas的rotate()方法 rotate()旋转当前的绘图。 语法：context.rotate(angle) 参原创 2017-10-14 18:30:39 · 49892 阅读 · 6 评论 -
canvas实现刮刮乐的效果
很多网站上都有刮刮乐的效果，这个呢，也不是很完善，大神们可以多提提意见哟！！豌豆拜上<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> canvas{ background: url("guaguale.jpg");原创 2017-10-15 15:55:17 · 1290 阅读 · 2 评论 -
canvas scale()画布缩放的使用
前两天把canvas的translate()和rotate()的方法都介绍了下，今天就来说说scale()scale() 方法缩放当前绘图，更大或更小。 注释：如果您对绘图进行缩放，所有之后的绘图也会被缩放。定位也会被缩放。如果您 scale(2,2)，那么绘图将定位于距离画布左上角两倍远的位置。 scale(x,y) 参数：x：X表示横轴方向上缩放倍数 y：Y表示纵轴方原创 2017-10-15 19:25:42 · 43467 阅读 · 2 评论