使用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. Win(Phone)10开发第(2)弹，导出APPX包并签名部署

    当我们新建一个win10 uap项目,如果想导出测试包,需要点击项目名称,选择商店-导出应用包,这个时候会生成一个文件夹,包含appx和ps1等文件. powershell运行Add-AppDevPa ...

  2. 企业项目开发--分布式缓存memcached（3）

    此文已由作者赵计刚授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 3.3.ssmm0-data 结构: 3.3.1.pom.xml  1 <?xml version=& ...

  3. FTP 作业整理

    一.FTP 客户端 与服务器端(没有解决黏包问题的代码) 服务器端设置 import socket import json ADDR = () sk =socket.socket() sk.bind( ...

  4. spring-security(2)

    记录一下spring security的配置 配置详解 <?xml version="1.0" encoding="UTF-8"?> <bea ...

  5. php curl 伪造IP来源的实例代码

    来源:http://www.jb51.net/article/31694.htm curl 它不但可以模仿用户登录,还可以模仿用户IP地址哦,为伪造IP来源,本实例仅供参考哦 //伪造ip ; $i ...

  6. Mongoose 分页查询优化、获取数据总长度

    无论是传统网页还是 ajax api,我们都不得不进行数据分页,一来节省带宽二来提升页面响应速度.作为一个数据完备的 web 应用,做好分页功能能极大提升用户体验. 简单的分页查询 在 mongoos ...

  7. 【xsy1378】 水题7号 贪心

    题目大意:有$m$组约束关系$(x_i,y_i)$,你要构造一个排列,满足数$x_i$出现在数$y_i$前面,请使得这个排列字典序最小,请输出这个排列.无解请输出-1. 数据范围:$n,m≤10^5$ ...

  8. 死锁、Lock锁、等待唤醒机制、线程组、线程池、定时器、单例设计模式_DAY24

    1:线程(理解) (1)死锁 概念: 同步中,多个线程使用多把锁之间存在等待的现象. 原因分析: a.线程1将锁1锁住,线程2将锁2锁住,而线程1要继续执行锁2中的代码,线程2要继续执行锁1中的代码, ...

  9. 四则运算2及psp0设计

    随机生成运算式,要求: 1.题目避免重复. 2.可定制(数量/打印方式). 3.可以控制一下参数. 要求:是否有乘除法,是否有括号,数值范围,加减有无负数,除法有无余数. 刚开始看到这样一个题目感觉还 ...

  10. Check类中的incl、union，excl，diff，intersect

    定义一些类,这些类之间有父子关系,如下: class Father{} class Son1 extends Father{} class Son2 extends Father{} class To ...