使用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. c# 1-2+3-4.....求和

    找规律: 下界:1 上界:n class Program { static void Main(string[] args) { ; ; i <=; i++) { ==) { sum -= i; ...

  2. 实现liunx之间无密码访问——ssh密匙

    环境描述 两台linux服务器 172.16.1.22[client],172.16.1.33[server],想要实现client服务器ssh无密码访问server服务器. 使用技术 linux 的 ...

  3. 使用Spring Boot,Spring Cloud和Docker实现微服务架构

    https://github.com/sqshq/PiggyMetrics     Microservice Architecture with Spring Boot, Spring Cloud a ...

  4. 进程控制块(PCB)

    用来描述和控制进程的运行的一个数据结构--进程控制块PCB(Process Control Block),是进程实体的一部分,是操作系统中最重要的记录型数据结构. PCB是进程存在的唯一标志 系统能且 ...

  5. HTML 5 使用 FileReader、FormData实现文件上传

    一.FileReader FileReader 对象允许Web应用程序异步读取存储在用户计算机中的文件(或缓冲区的原始数据),使用File或Blob对象指定要读取的文件或数据. 1.1 实例化 var ...

  6. android平台一些常用代码

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 3 ...

  7. C#中ExecuteReader、ExecuteNonQuery、ExecuteScalar、SqlDataReader、SqlDataAdapter的区别

    ExecuteNonQuery()执行命令对象的SQL语句,返回一个int 类型的变量,返回数据库操作之后影响的行数.适合用来验证对数据库进行增删改的情况. 2.ExecuteScalar()也可以执 ...

  8. springclould nginx转发 websocket400报错问题

    之前一直找原因一直围绕着nginx转发的问题 说头信息没设置全 然后nginx配置文件上加了这些 #http块加以下几行: map $http_upgrade $connection_upgrade ...

  9. Android Studio SVN的使用

    一 SVN的配置 这篇文章使用的Android studio版本为1.4 RC3. 我选择的是TortoiseSVN,版本为1.8,不要选择1.9版本(目前的最新版),因为如果你安装的是1.9版本当你 ...

  10. SPSS学习系列之SPSS Text Analytics是什么？

    不多说,直接上干货! IBM® SPSS® Text Analytics 是一个IBM® SPSS® Modeler 完全集成内插式插件,它采用了先进语言技术和Natural Language Pro ...