canvas绘制图形

第一步：html5页面中添加canvas元素

<canvas id="myCanvas" width="300" height="300"></canvas>

1、javascript绘制图形(矩形)

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");     //获取允许绘制图像的2D环境
cxt.fillStyle="#FF0000";        //fillStyle为绘制的图像填充颜色
cxt.fillRect(0,0,150,75);       //fillRect绘制矩形，前两个坐标为x，y轴，后面为宽高
</script>

除了可以使用fillStyle和fillRect，还可以使用strokeStyle和strokeRect，fill是填充，而stroke是轮廓，所有用strokeStyle和strokeRect是绘制的矩形轮廓，而fillStyle与fillRect绘制的是实体矩形。

2、绘制直线（使用 moveTo、lineTo、stroke方法）

moveTo(x,y)：用于建立新的子路径，规定起始点为 (x,y)

lineTo(x,y)：用于从moveTo方法规定的起始点开始绘制一条到规定坐标的直线。

stroke()：用于沿着该路径绘制一条直接。

<script type="text/javascript">
window.onload = function(){var c = document.getElementById('myCanvas');var content = c.getContext('2d');content.moveTo(0,0);content.lineTo(300,300);content.stroke();
};
</script>

3、绘制圆形（用到beginPath、arc、closePath、fill这四个方法）

beginPath()：用于开始绘制路径

closePath()：用于将图形闭合起来

arc(x,y,radius,startAngle,endAngle,anticlockwise)：用于绘制圆形，x,y为坐标，radius为半径，startAngle为开始的角度，endAngle为结束的半径，anticlockwise为是否按顺时针方向绘制图形。

<script type="text/javascript">
window.onload = function(){var c = document.getElementById('myCanvas');var content = c.getContext('2d');content.fillStyle="#FA7E2A";content.beginPath();content.arc(50,50,50,0,Math.PI*2,true);content.closePath();content.fill();
};
</script>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{padding: 0;margin:0;}
body{background: #1b1b1b;}
#div1{margin:50px auto; width:300px; height: 300px;}
canvas{background: #fff;}
</style>
<script type="text/javascript">
window.onload = function(){var c = document.getElementById('myCanvas');var content = c.getContext('2d');for(var i=0; i<=15; i++){content.fillStyle = '#FA7E2A';content.beginPath();content.arc(0,150,i*10,0,Math.PI*3/2,true);//content.closePath();
        content.stroke();}};
</script>
</head>
<body><div id="div1"><canvas id="myCanvas" width="300" height="150"></canvas></div>
</body>
</html>

4、绘制三角形

清除：clearRect(x,y,width,height); x,y为坐标

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{padding: 0;margin:0;}
#div1{margin:50px auto; width:300px; height: 300px;}
canvas{border:1px solid #000;}
</style>
<script type="text/javascript">
window.onload = function(){var c = document.getElementById('myCanvas');var content = c.getContext('2d');content.fillStyle = '#FA7E2A';content.beginPath();content.moveTo(25,25);content.lineTo(150,25);content.lineTo(25,150);content.closePath();content.fill();document.getElementsByTagName('input')[0].onclick = function(){content.clearRect(0,0,300,300);};
};
</script>
</head>
<body><div id="div1"><canvas id="myCanvas" width="300" height="300"></canvas><input type="button" value="清除画布" /></div>
</body>
</html>

转载于:https://www.cnblogs.com/wxydigua/p/4204064.html

canvas绘制图形相关推荐

html5 canvas绘制图形,html5 Canvas绘制图形入门详解
html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome. ...
【canvas绘制图形】
canvas绘制图形一.绘制圆形二.绘制三角形三. 绘制矩形一.绘制圆形 <!DOCTYPE html> <html lang="en"> < ...
- Canvas 简介- 使用 Canvas 绘制图形- Canvas 常用方法- SVG 简介- 使用 SVG 绘制基本图形
1 Canvas 简介 Canvas 表示画布,现实生活中的画布是用来作画的. HTML5 中的 Canvas :我们可以称它为"网页中的画布".默认情况下,Canvas 是一块 ...
android 自定义多边形,Android:自定义view之Canvas绘制图形
前面讲解了onMeasure,接下来讲解onDraw,onDraw主要就是绘制,也就是我们真正关心的部分,使用的是Canvas绘图. @Override protected void onDraw(C ...
微信小程序开发—(八)canvas绘制图形
一.小知识 (1).API接口 (2).context 对象的方法列表二.步骤 wxml中: <canvas canvas-id="myCanvas" class=&quo ...
canvas绘制图形API(一）
canvas元素的基础知识 canvas元素是HTML5中的一个新增的重要元素,专门用来绘制图形.在页面上放置一个canvas元素,就相当于在页面上放置了一块"画布",可以在其中进 ...
使用H5新增的canvas绘制图形
一.绘制文本 <!DOCTYPE html> <html lang="zh-cn"><head><meta charset="U ...
使用canvas绘制图形
canvas是html5新增的专门用来绘制图形的元素,在页面上放置一个canvas元素,就相当于在页面上放置了一块画布,可以在其中使用方法进行图形的绘制. 1.1 在页面添加canvas元素 < ...
HTML5利用Canvas绘制图形(Canvas基本知识、绘制矩形、使用路径和图形组合)
绘制图形有很多方法,可以借助Flash实现,也可以使用SVG和VML来绘图.本次将要学习一种新的灰土方法--使用Canvas元素,它是基于HTML5原生的绘图功能.使用Canvas元素,可以绘制图形, ...

canvas绘制图形

canvas绘制图形相关推荐

最新文章

热门文章