我们可以用画布（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. 论ul、ol和dl的区别

    1.ul是无序列表,也就是说没有排列限制可以随意加li: <ul> <li>可以随意放置</li> <li>可以随意放置</li> < ...

  2. hibernate 注解使用

    实体类声明,需要引用 import javax.persistence.Entity; import javax.persistence.Table; @Entity @Table(name=&quo ...

  3. day38 05-Spring的BeanFactory与ApplicationContext区别

    ApplicationContext怎么知道它是一个工厂呢? BeanFactory也可以做刚才那些事情,只不过ApplicationContext对它有扩展.ApplicationContext间接 ...

  4. Faster RCNN算法demo代码解析

    一. Faster-RCNN代码解释 先看看代码结构: Data: This directory holds (after you download them): Caffe models pre-t ...

  5. hack 记录

    0.寻找信号强的wifi,对于隐藏ssid 的可通过嗅探 1.wifi密码:wifi万能钥匙.minidwep-gtk.aircrack-ng 2.对于绑定mac地址的安全设置,可通过对活动的客户端网 ...

  6. ASP.NET自定义控件组件开发 第一章 第一章：从一个简单的控件谈起

    第一章:从一个简单的控件谈起 系列文章链接: ASP.NET自定义控件组件开发 第一章 待续 ASP.NET自定义控件组件开发 第一章 第二篇 接着待续 ASP.NET自定义控件组件开发 第一章 第三 ...

  7. C++ 之手写memcpy

    #include<iostream>#include<cstdio>using namespace std; void* mymemcpy(void* dst, const v ...

  8. day38 18-Spring的XML和注解的结合使用

    什么情况下使用XML,什么情况下使用注解?又有XML,又有注解,开发的时候使用哪种? XML:结构清晰,配置麻烦. 注解:简单, 它俩的结合点在属性注入上. 两种方式结合:一般使用XML注册Bean, ...

  9. 【水滴石穿】react-native-video-project

    感觉这个是很有才华的博主,毕竟是可以在npm 包里面留后门的程序员 博主的gihtub关于这个项目的地址是:https://github.com/ikimiler/react-native-video ...

  10. 【JZOJ3886】【长郡NOIP2014模拟10.22】道路维护

    CCC 最近徆多人投诉说C国的道路破损程度太大,以至亍无法通行 C国的政府徆重视这件事,但是最近财政有点紧,丌可能将所有的道路都进行维护,所以他们决定按照下述方案进行维护 将C国抽象成一个无向图,定义 ...