最近看了一本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. 系统、决策、控制研究系列(SSDC)

    本类目主要介绍的书籍来自springer的系列书籍中的一本,对于该系列书籍介绍如下: “系统.决策及控制研究”(SSDC)系列涵盖了在广泛认知的系统.决策及控制的各个领域的快速.最新和高质量的最新发展 ...

  2. CentOS6.9下升级默认的OpenSSH操作记录(升级到OpenSSH_7.6p1)

    近期对IDC机房服务器做了一次安全漏洞扫描,漏扫结果显示服务器的OpenSSH版本太低(CentOS6默认是OpenSSH_5.3p1),存在漏洞隐患,安全部门建议升级到OpenSSH_7.6p1.升 ...

  3. Finished yeah!

    终于到了最后的博客阶段,这时候才知道博客此时此刻是多么的惬意,它成了书写心声的自由平台!耗时一天完成这作业说起来也是蛮辛苦的,编译器需要新装,IDE需要熟悉,当然最主要的是之前浅入浅出的C++功底在此 ...

  4. Linux内核分析作业五

    扒开系统调用的三层皮(下) 给MenuOS增加time和time-asm命令 步骤 rm menu -rf //强制删除 git clone http://github.com/menging/men ...

  5. html之间传递参数

    转自:http://blog.163.com/yangzhanghui_job/blog/static/179575062201271624839972/ aa.html 往 bb.html 传参 a ...

  6. jupyter notebook远程配置

    服务器端配置 在服务器生成jupyter配置文件 $jupyter notebook --generate-config 生成之后会得到配置文件的路径 启动jupyter,设置密码 In [1]: f ...

  7. [BUAA_SE_2017]个人项目-Sudoku

    个人项目作业-数独 Github项目地址 时间预估 PSP2.1 Personal Software Process Stages 预估时间(分钟) 实际耗时(分钟) Planning 计划 60 · ...

  8. Alpha冲刺随笔集

    作业地址 项目名称:高校实验室信息化管理系统 团队成员 学号 姓名 031602636 许舒玲 031602237 吴杰婷 031602220 雷博浩 031602634 吴志鸿 181600107 ...

  9. [系统软件]Ubuntu 18.04中的Shutter禁用了“编辑”选项解决

    本文引用自linux公社, 原文请点击 : https://www.linuxidc.com/Linux/2018-04/151911.htm   在Ubuntu 18.04中安装了我最喜欢的截图工具 ...

  10. apache自带压力测试工具ab的使用及解析

    当你搭建了apache服务器并在上面部署了web网站,在网站运行前,为了使apache服务器的性能得到更好的应用,我们可以先对其进行压力测试.进行压力测试其实非常简单,我们也不用再额外下载安装什么测试 ...