我们可以用画布（Canvas）绘制各种图形，下面代码是绘制的一个圆形：

<!DOCTYPE html>

<html>

    <head>

        <title>Canvas画布</title>

        <meta charset="UTF-8">

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

        <style>

            #canvas{width: 200px; height: 200px; border: 1px solid #d3d3d3;}

        </style>

    </head>

    <body>

        <div>绘制一个圆</div>

        <canvas id="canvas">您的浏览器不支持HTML5 canvas 标签。</canvas>

        <script>

            var canvas=document.getElementById("canvas");

            canvas.width=200;

            canvas.height=200;

            var context=canvas.getContext("2d");

            context.beginPath();

            context.arc(100,50,50,0,2*Math.PI);

            context.stroke();

        </script>

    </body>

</html>

HTML5标准规范：HTML5标准规范

HTML5代码规范：HTML5代码规范

HTML5 canvas绘制图片模糊的问题

HTML5 canvas绘制图片模糊的问题2

学习canvas画布的更多相关文章

  1. 如何学习html画布呢（canvas)

    我列出了canvas教学资源 http://www.gbtags.com/gb/gbliblist/1.htm  这是极客标签(不是极客学院) http://study.163.com/course/ ...

  2. qml基础学习 Canvas画笔

    一.画布元素 自qt4.7发布qml以来,qml也在一直不断的完善中,在qt4时代使用qml时如果需要异形图,那我们只能让设计师来切图,这样的感觉是很不爽的,总感觉开发没有那么犀利.但是到了qt5这一 ...

  3. “canvas画布仿window系统自带画图软件"项目的思考

    "canvas画布仿window系统自带画图软件"项目的思考 首先贴上DEMO图,并没有美化效果.对UI有要求的,请自带补脑技术. 思考一 在做项目的过程中,我发现"工具 ...

  4. 更新——Canvas画布动画效果之实现倒计时

    Hello,大家好! 小W复活啦!继续欢乐的给大家更博,输送新知识~~ 不开玩笑啦!秒进正题~~~ 上次更博,小W给大家介绍了Canvas画布的基础部分,以及实现了一个由7*10点阵图显示的倒计时的基 ...

  5. 关于Chrome和Opera中draw Image（）方法无法在canvas画布中绘制图片的问题

    var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); var img=d ...

  6. 将canvas画布内容转化为图片（toDataURL()，创建url）

    将canvas画布内容转化为图片(toDataURL(),创建url) 总结 1.现在的浏览器都支持右键另存为图片的方法来将canvas画布内容转化为图片 2.在代码里面可以通过toDataURL() ...

  7. canvas画布导出图片并下载

    近期在学习关于画布知识,关于 画布导出图片, 在导出jpeg格式的图片时,会发现图片背景色变成了黑色,原因是画布透明的地方 默认转成了黑色,可以在绘制画布前设置透明处背景色为白色. // 背景色转换成 ...

  8. html 5 canvas画布整理

    1. 创建canvas画布<canvas id="myCanvas" width="800" height="800" >< ...

  9. 用html5的canvas画布绘制贝塞尔曲线

    查看效果:http://keleyi.com/keleyi/phtml/html5/7.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...

随机推荐

  1. MySQL--视图、触发器、事务、存储过程、内置函数、流程控制、索引

    视图 触发器 事务 存储过程 内置函数 流程控制 索引 视图 1.什么是视图 视图就是通过查询得到一张虚拟表,然后保存下来,下次直接使用即可 2.为什么要用视图 如果要频繁使用一张虚拟表,可以不用重复 ...

  2. NOIP模拟17.9.22

    NOIP模拟17.9.22 前进![问题描述]数轴的原点上有一只青蛙.青蛙要跳到数轴上≥

  3. 洛谷P1573 栈的操作 [2017年6月计划 数论11]

    P1573 栈的操作 题目描述 现在有四个栈,其中前三个为空,第四个栈从栈顶到栈底分别为1,2,3,…,n.每一个栈只支持一种操作:弹出并 压入.它指的是把其中一个栈A的栈顶元素x弹出,并马上压入任意 ...

  4. SQL Sever实验三 视图与数据更新

    一． 实验目的 1．掌握创建视图的 SQL 语句,数据更新的 SQL 语句. 2．了解使用创建视图向导创建视图的方法. 3．掌握使用 SQL 创建视图的方法,使用 SQL 更新数据的方法. 二． 实验 ...

  5. ES 6.X的环境搭建

    一.ES windows环境下的安装 1.官网下载windows安装包 2.解压启动 F:\software\ES\elasticsearch-6.4.0\bin\elasticsearch 3.查看 ...

  6. HR招聘_(三)_招聘方法论（招聘途径及流程）

    1.招聘途径 网络招聘:企业官网,招聘网站,微信,论坛等. 校园招聘:学校信息栏海报,学校组织招聘会,校企业联合专场. 现场招聘会: 专场招聘会,人才市场招聘会. 猎头公司:猎头(年薪高于350K), ...

  7. hdfs 的存储空间扩展

    问题:之前集群上每个节点的的大小为50G, 但是硬盘容量是160G的, 不明白为什么才50个G: 后来发现是因为dfs.data.dir设置的问题,该目录下挂载的磁盘空间的大小就会作为该节点的容量.. ...

  8. vue-cli3 关闭eslint

    关闭eslint 直接注释掉package.json文件中eslint的配置就可以了(以下是vue-cli的默认配置) "eslintConfig": { "root&q ...

  9. Android Bitmap缓存介绍

    转载自http://blog.csdn.net/linghu_java/article/details/8595717 Android中加载一个Bitmap(位图)到你的UI界面是非常简单的,但是如果 ...

  10. 对象无法注册到Spring容器中，手动从spring容器中拿到我们需要的对象

    当前对象没有注册到spring容器中,此时无法new object()  的方式创建对象,否则所有@Autowired 注入的对象都为null; 处理方式: 手动创建一个类@Component注册到S ...