我们可以用画布（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. 基础篇-1.5Java的数组

    1 引言 每一种编程语言都有其自身的数组概念,大同小异,都是为了存储一堆数据,而Java的数组是用来存储相同类型的数据,如声明一个arr[10]数组,可以用来代替声明10个变量. 2 声明和创建数组 ...

  2. MySQL--修改Mac中的默认编码

    1.在终端中进入到etc目录下 2.打开etc目录下的my.cnf文件(如果这样修改不了的就要提高用户权限, 可以尝试使用sudo来打开文件) 3.将一下内容添加到my.cnf文件中 [client] ...

  3. Leetcode47. Permutations II全排列2

    给定一个可包含重复数字的序列,返回所有不重复的全排列. 示例: 输入: [1,1,2] 输出: [ [1,1,2], [1,2,1], [2,1,1] ] 在全排列1题目的基础上先排序,目的是把相同的 ...

  4. Leetcode63.Unique Paths II不同路径2

    一个机器人位于一个 m x n 网格的左上角 (起始点在下图中标记为"Start" ). 机器人每次只能向下或者向右移动一步.机器人试图达到网格的右下角(在下图中标记为" ...

  5. Django项目：CRM(客户关系管理系统)--15--07PerfectCRM实现King_admin显示注册的表01

    <th ><a href="/kingadmin/{% get_app_name admin_class.model %}/{% get_model_name admin_ ...

  6. Html5知识点以及兼容性

    什么的HTNL5? HTML5 是最新的 HTML 标准. HTML5 是专门为承载丰富的 web 内容而设计的,并且无需额外插件. HTML5 拥有新的语义.图形以及多媒体元素. HTML5 提供的 ...

  7. Java加密AES算法及spring中应用

    开门见山直接贴上代码 .AESUtil加密解密工具类 import java.security.Key; import java.security.SecureRandom; import java. ...

  8. shell 中数组学习

         因为应用shell的时间不是太长.对于数组在实际项目中没有接触过.今天在需要把相似于:a=1,2,3,4这种东西转换. 之前用的方法是用awk,分别取出.所以今天想是否有更好更简洁的方法-- ...

  9. Eclipse Jobs 和后台进程

    Eclipse后台进程 1.主线程(Main thread) 一个Eclipse客户端只能跑一个进程,但却可以创建很多线程. 在Eclipse框架中,会用一个单线程去运行所有的代码指令,这个线程执行客 ...

  10. 如何在Data Lake Analytics中使用临时表

    前言 Data Lake Analytics (后文简称DLA)是阿里云重磅推出的一款用于大数据分析的产品,可以对存储在OSS,OTS上的数据进行查询分析.相较于传统的数据分析产品,用户无需将数据重新 ...