最近看了一本canvas的书，里面对canvas的一些基本知识讲的很详细。相比于一个div加点颜色，我臭屁的觉得使用canvas画长方形正方形圆形之类的是大才小用。

下面我放几个canvas还不错的功能点，感觉还行。

图



代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <script>

        function $$(id){

            return document.getElementById(id);

        }

        window.onload=function(){

            var cnv=$$("canvas");

            var cxt=cnv.getContext("2d");

            cxt.globalCompositeOperation="xor";

            cxt.fillStyle="red";

            cxt.fillRect(30,30,60,60);

            cxt.beginPath();

            cxt.arc(100,100,40,0,Math.PI*2,true);

            cxt.closePath();

            cxt.fillStyle="LightSkyBlue";

            cxt.fill();

            cxt.fillStyle="red";

            cxt.fillRect(110,30,60,60);

            cxt.fillStyle="red";

            cxt.fillRect(30,110,60,60);

            cxt.fillStyle="red";

            cxt.fillRect(110,110,60,60);

        }

    </script>

</head>

<body>

    <canvas id="canvas" width="400" height="250" style="border:1px dashed gray;"></canvas>

</body>

</html>

图

<!DOCTYPE html>

<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->

<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->

<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->

<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->

    <head>

        <meta charset="utf-8">

        <meta http-equiv="X-UA-Compatible" content="IE=edge">

        <title></title>

        <meta name="description" content="">

        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="stylesheet" href="">

    </head>

    <body>

        <!--[if lt IE 7]>

            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>

        <![endif]-->

        <script>

            function $$(id){

                return document.getElementById(id);

            }

            window.onload=function(){

                var cnv=$$("canvas");

                var cxt=cnv.getContext("2d");

                var text="点击存图片";

                cxt.font="bold 60px 微软雅黑";

                cxt.shadowOffsetX=5;

                cxt.shadowOffsetY=5;

                cxt.shadowColor="#66CCFF";

                cxt.shadowBlur=10;

                cxt.fillStyle="#FF6699";

                cxt.fillText(text,10,90);

                $$("btn").onclick=function(){

                    window.location=cnv.toDataURL("image/png");

                }

                }

        </script>

       <canvas id="canvas" width="320" height="150" style="border:1px dashed gray"></canvas>

       <br/>

       <input id="btn" type="button" value="保存图片"/>

    </body>

</html>

当然还有canvas的边界问题等等。

by本文看书自web前端开发精品课HTML5Canvas开发详解。

by我用canvas很少，觉得就是几个API调用的问题。理解非常狭隘，求你们拍砖。

有趣的canvas的更多相关文章

  1. 有趣的 Canvas

    canvas动画狗:https://www.jianshu.com/p/7873307147d5

  2. 巧用 CSS 把图片马赛克化

    一.image-rendering 介绍 CSS 中有一个有趣的特性叫 image-rendering,它可以通过算法来更好地显示被缩放的图片. 假设我们有一张尺寸较小的二维码截图(下方左),将其放大 ...

  3. 16个非常有趣的HTML5 Canvas动画特效集合

    HTML5技术正在不断的发展和更新,越来越多的开发者也正在加入HTML5阵营,甚至在移动开发上HTML5的地位也是越来越重要了.HTML5中的大部分动画都是通过Canvas实现,因为Canvas就像一 ...

  4. 有趣html5（两）----使用canvas结合剧本画在画布上的简单图（html5另一个强大）

    请珍惜劳动小编成果,这篇文章是原来小编,转载请注明出处. 于html5中能够使用canvas标签在画布上绘图,先直接上代码,这篇文章先简介一下canvas的用法.简单画几个圆,矩形,三角形,写字. 在 ...

  5. 利用纯JS和HTML Canvas生成随机迷宫过程中产生的有趣的事情

    上效果图: #先看生成随机迷宫的代码吧↓ <html> <head> <title>生成随机迷宫v1.0</title> </head> & ...

  6. 有趣的Javascript：只需一个JS让万恶的IE5、IE6、IE7、IE8全都支持H5原生Canvas绘图（有演示demo）

    该demo支持IE5以上任意内核的浏览器 查看演示demo:支持IE5以上版本的浏览器Canvas绘图demo 补充:chats.js和echarts等图表库也可以使用本方法兼容IE6以上浏览器 1. ...

  7. html5 canvas常用api总结(二)--绘图API

    canvas可以绘制出很多奇妙的样式和美丽的效果,通过几个简单的api就可以在画布上呈现出千变万化的效果,还可以制作网页游戏,接下来就总结一下和绘图有关的API. 绘画的时候canvas相当于画布,而 ...

  8. 推荐10款超级有趣的HTML5小游戏

    HTML5的发展速度比任何人的都想像都要更快.更加强大有效的和专业的解决方案已经被开发......甚至在游戏世界中!这里跟大家分享有10款超级趣味的HTML5游戏,希望大家能够喜欢! Kern Typ ...

  9. 【BOOM】一款有趣的Javascript动画效果

    实践出真知,有的时候看到一些有趣的现象就想着用自己所学的知识复现一下.    boomJS 缘起 前几天在 github 上看到同事的一个这样的小项目,在 IOS 上实现了这样一个小动画效果,看上去蛮 ...

随机推荐

  1. 原创超清的 Webpack2 视频教程

    原文发表于我的技术博客 这是我免费发布的高质量超清「Webpack 2 视频教程」. Webpack 作为目前前端开发必备的框架,Webpack 发布了 2.0 版本,此视频就是基于 2.0 的版本讲 ...

  2. nginx负载均衡（5种方式）、rewrite重写规则及多server反代配置梳理

    Nginx除了可以用作web服务器外,他还可以用来做高性能的反向代理服务器,它能提供稳定高效的负载均衡解决方案.nginx可以用轮询.IP哈希.URL哈希等方式调度后端服务器,同时也能提供健康检查功能 ...

  3. visual studio 2013的使用和单元测试

    Visual Studio 2013 是一个先进的开发解决方案,各种规模的团队通过它均可设计和创建引人注目的应用程序.Visual Studio 13在新功能包括C#和VB编译器和IDE支持完全基于. ...

  4. 20135323符运锦----LINUX第二次实践：内核模块编译

    Linux实践二--模块 一.知识点总结 ①Linux模块是一些可以作为独立程序来编译的函数和数据类型的集合.之所以提供模块机制,是因为Linux本身是一个单内核.单内核由于所有内容都集成在一起,效率 ...

  5. Linux内核分析（第九周）

    第一周总结1.存储程序计算机 + 函数调用堆栈 + 中断机制 2.堆栈:C语言程序运行时候必须的一个记录调用路径和参数的空间(函数调用框架/提供局部变量/传递参数/保存返回地址) 不同指令可能实现相同 ...

  6. PAT 1026 程序运行时间

    https://pintia.cn/problem-sets/994805260223102976/problems/994805295203598336 要获得一个C语言程序的运行时间,常用的方法是 ...

  7. Difference between prop and attr in different version of jquery

    jQuery <1.9$('#inputId').attr('readonly', true); jQuery 1.9+$('#inputId').prop('readonly', true); ...

  8. MySql连接空闲8小时自动断开引起的问题

    一.问题描述 ​ 最近遇到了一个奇怪的MySql数据库问题,好几次前一天晚上历史数据还正常存储,第二天早上来了看实时数据存储还正常,历史数据不存储了.找了好久也没找到问题.后来仔细想了想,历史数据设置 ...

  9. [转帖新闻]Windows 7时代即将终结：曾有多辉煌 如今就有多凄凉

    Windows 7时代即将终结:曾有多辉煌 如今就有多凄凉 投递人 itwriter 发布于 2019-01-18 10:47 评论(4) 有834人阅读 [收藏] « » 文/屠敏 来源:CSDN( ...

  10. [小知识] 关闭我的电脑里面的百度网盘以及修改win+e快捷键打开我的电脑

    1. 登录百度云盘客户端 设置->基本->取消在我的电脑中显示百度网盘 2. 修改win+e的默认显示 打开我的电脑. 选择查看-选项 文件夹选项修改为: 此电脑即可..