[HTML5] Canvas绘制简单形状
使用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绘制简单形状的更多相关文章
- 学习笔记：HTML5 Canvas绘制简单图形
HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...
- [HTML5] Canvas绘制简单图片
获取Image对象,new出来 定义Image对象的src属性,参数:图片路径 定义Image对象的onload方法,调用context对象的drawImage()方法,参数:Image对象,x坐标, ...
- 怎样用JavaScript和HTML5 Canvas绘制图表
原文:https://code.tutsplus.com/zh-...原作:John Negoita翻译:Stypstive 在这篇教程中,我将展示用JavaScript和canvas作为手段,在饼状 ...
- 使用html5 canvas绘制图片
注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...
- 使用html5 canvas绘制圆形或弧线
注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...
- html5 Canvas绘制图形入门详解
html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome. ...
- 使用html5 Canvas绘制线条(直线、折线等)
使用html5 Canvas绘制直线所需的CanvasRenderingContext2D对象的主要属性和方法(有"()"者为方法)如下: 属性或方法 基本描述 strokeSty ...
- 使用 HTML5 Canvas 绘制出惊艳的水滴效果
HTML5 在不久前正式成为推荐标准,标志着全新的 Web 时代已经来临.在众多 HTML5 特性中,Canvas 元素用于在网页上绘制图形,该元素标签强大之处在于可以直接在 HTML 上进行图形操作 ...
- 解决html5 canvas 绘制字体、图片与图形模糊问题
html5 canvas 绘制字体.图片与图形模糊问题 发生情况 多出现在高dpi设备,这意味着每平方英寸有更多的像素,如手机,平板电脑.当然很多高端台式电脑也有高分辨率高dpi的显示器. canva ...
随机推荐
- ODP.NET 之 ExecuteNoQuery 执行 Merge into 返回值
当执行Oracle.ManagedDataAccess.Client.OracleCommand.ExecuteNonQuery时,如果sql语句是 merge into ...,则返回值表现不稳定, ...
- C语言 IPv6 十六进制 转 十进制
#include <stdio.h> #include <string.h> #include <math.h> //ipv4地址转换 int ipv4_to_i( ...
- poj1269---直线位置关系
题目大意:给你8个点,也就是两条直线,让你判断他们的位置关系 代码如下: #include <iostream> #include<cstdio> #include<cm ...
- 在.net core Mvc中使用Options和IOptionsSnapshot
1.Startup.cs 下代码 using System; using System.Collections.Generic; using System.Linq; using System.Thr ...
- 最常用的15大Eclipse开发快捷键技巧
1.alt+?或alt+/:自动补全代码或者提示代码 这个是我最得意的快捷键组合了,尤其是当输入syso几个字符之后,2个手指轻松按下这2个键的时候,自动就补全System.out.println() ...
- iOS多线程---GCD中线程的通信
在子线程的任务完成后,有时候需要从子线程回到主线程,刷新UI. 从子线程中回到主线程,以前已经写过一种方法: [self.imageView performSelectorOnMainThread:@ ...
- 布隆过滤器redis缓存
Bloom Filter布隆过滤器算法背景如果想判断一个元素是不是在一个集合里,一般想到的是将集合中所有元素保存起来,然后通过比较确定.链表.树.散列表(又叫哈希表,Hash table)等等数据结构 ...
- 【4】JMicro微服务-服务限流
如非授权,禁止用于商业用途,转载请注明出处作者:mynewworldyyl 通过配置SMethod的maxSpeed属性实现服务限流,单位是个/每秒(qps),也就是服务方法每秒允许接收的最大请求个数 ...
- NOIP上机测试注意事项
由于近期模拟题原地**次数较多,故写一篇警示文 1,头文件 1.1正式比赛中,反正我不敢用bits/stdc++.h. 1.2正式比赛中,建议打出以下十个库 #include<iostream& ...
- Xcode 9 Analyzing Crash Reports
Analyzing Crash Reports After you distribute your app for testing by using TestFlight or after you m ...