使用canvas来进行绘画，它像很多其他dom对象一样，有很多属性和方法，操作这些方法，实现绘画

获取canvas对象，调用document.getElementById()方法

调用canvas对象的getContext()方法，获取context对象，参数：String的”2d”

绘制线段

调用context对象的moveTo()方法，把起点位置定义好，参数：x，y

调用context对象的lineTo()方法，把终点位置定义好，参数：x，y

调用context对象的stroke()方法，画一条线

如果不调用moveTo()方法，起点的位置是上次的点

绘制矩形

调用context对象的fillRect()方法，填充矩形，参数：起点横坐标，起点纵坐标，宽度，高度

调用context对象strokeRect()方法，边框矩形，参数：起点横坐标，起点纵坐标，宽度，高度

例如：context.fillRect(0,0,100,100); 会画出一个黑色的矩形

注意：html5 canvas fillRect坐标和大小一直不对，是因为canvas的宽度和高度必须内联在canvas标签中才对

绘制扇形

调用context对象的beginPath()方法，开启路径

调用context对象的moveTo()方法，把路径移动到圆心位置，参数：x，y

调用context对象的arc()方法，绘制圆弧，参数：圆心x坐标，圆心y坐标，开始角度，结束角度

调用context对象的closePath()方法，关闭路径

调用context对象的fill()方法，填充颜色

绘制贝塞尔曲线

调用context对象的bezierCurveTo()方法，绘制曲线路径，

参数：第一控制点x，第一控制点y，

第二控制点x，第二控制点y，

最终控制点x，最终控制点y

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>测试canvas</title>

</head>

<body>

<canvas id="myCanvas" width="500px" height="1000px"></canvas>

<script>

    var canvas=document.getElementById('myCanvas');

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

    //绘制矩形

    context.fillRect(0,0,100,100);

    context.strokeRect(120,0,100,100);

    //绘制扇形

    context.beginPath();

    context.moveTo(50,220);

    context.arc(50,220,50,0,Math.PI/4);

    context.closePath();

    context.fill();

    //绘制线段

    context.moveTo(0,300);

    context.lineTo(100,300);

    context.lineTo(100,400);

    context.stroke();

    //绘制贝塞尔曲线

    context.moveTo(200,300);

    context.bezierCurveTo(200,300,250,300,300,400);

    context.stroke();

</script>

</body>

</html>

[HTML5] Canvas绘制简单形状的更多相关文章

  1. 学习笔记：HTML5 Canvas绘制简单图形

    HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...

  2. [HTML5] Canvas绘制简单图片

    获取Image对象,new出来 定义Image对象的src属性,参数:图片路径 定义Image对象的onload方法,调用context对象的drawImage()方法,参数:Image对象,x坐标, ...

  3. 怎样用JavaScript和HTML5 Canvas绘制图表

    原文:https://code.tutsplus.com/zh-...原作:John Negoita翻译:Stypstive 在这篇教程中,我将展示用JavaScript和canvas作为手段,在饼状 ...

  4. 使用html5 canvas绘制图片

    注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...

  5. 使用html5 canvas绘制圆形或弧线

    注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...

  6. html5 Canvas绘制图形入门详解

    html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome. ...

  7. 使用html5 Canvas绘制线条(直线、折线等)

    使用html5 Canvas绘制直线所需的CanvasRenderingContext2D对象的主要属性和方法(有"()"者为方法)如下: 属性或方法 基本描述 strokeSty ...

  8. 使用 HTML5 Canvas 绘制出惊艳的水滴效果

    HTML5 在不久前正式成为推荐标准,标志着全新的 Web 时代已经来临.在众多 HTML5 特性中,Canvas 元素用于在网页上绘制图形,该元素标签强大之处在于可以直接在 HTML 上进行图形操作 ...

  9. 解决html5 canvas 绘制字体、图片与图形模糊问题

    html5 canvas 绘制字体.图片与图形模糊问题 发生情况 多出现在高dpi设备,这意味着每平方英寸有更多的像素,如手机,平板电脑.当然很多高端台式电脑也有高分辨率高dpi的显示器. canva ...

随机推荐

  1. 通过sys.objects查询SQL SERVER数据库改动内容

    适用于: SQL Server 2008 + .Azure SQL 数据库.Azure SQL 数据仓库.并行数据仓库 系统视图sys.objects,在数据库中用户定义(创建)的每个架构范围对象(例 ...

  2. Docker容器的原理与实践（上）

    本文来自网易云社区. 虚拟化 是一种资源管理技术,将计算机的各种资源予以抽象.转换后呈现出来, 打破实体结构间的不可切割的障碍,使用户可以比原本更好的方式来应用这些资源. Hypervisor 一种运 ...

  3. day85 ModuleForm Form组件

    1 forms组件与modelform组件 forms组件: https://www.cnblogs.com/yuanchenqi/articles/9036474.htmlmodelForm组件:h ...

  4. Day37 多进程

    什么是进程 进程(Process)是计算机中的程序关于某数据集合上的一次运行活动,是系统进行资源分配和调度的基本单位,是操作系统结构的基础.在早期面向进程设计的计算机结构中,进程是程序的基本执行实体: ...

  5. QQ个人信息保护 | 攻的对面叫防

    近来我们愈来愈重视个人信息保护,当接到骚扰电话时,你心里或许在想(我手机号怎么又被别人知道的?别人是怎么知道我手机号的?),现在的时代,手机已或不可缺,QQ几乎每个人都在用.而有些人总想保护个人QQ资 ...

  6. SELECT 三级联动 [转]

    <!DOCTYPE html> <html> <head> <meta charset=gbk /> <title>selectList&l ...

  7. 【hdu6035】 Colorful Tree dfs序

    题目传送门:http://acm.hdu.edu.cn/showproblem.php?pid=6035 题目大意:给你一棵树,树上每个节点都有一个颜色. 现在定义两点间的距离为两点最短路径上颜色集合 ...

  8. 如何使用 AutoWire方式注入 JdbcDaoSupport DataSource

      @Repositorypublic class MyDaoImpl extends JdbcDaoSupport implements MyDao { @Autowired private Dat ...

  9. Oracle 锁问题处理

    Oracle 锁问题处理 锁等待问题是一个常见的问题 查看持有锁的对象 查看事务正在执行的语句,与应用确认是否能够kill kill 对应的session

  10. (转)mysql的sql_mode合理设置

    mysql的sql_mode合理设置 目录          http://xstarcd.github.io/wiki/MySQL/MySQL-sql-mode.html http://dev.my ...