一、绘制圆形

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#cav{border: 1px solid #ccc;}</style>
</head>
<body><!-- 推荐在canvas标签上去写宽和高宽高比 2 ：1 --><canvas id="cav" width="600px" height="300px"></canvas><script>let cav = document.getElementById('cav');let c = cav.getContext('2d');/* c.arc(x, y, radius, starAngle,endAngle, anticlockwise) *//*   x和y   圆心的x坐标和y坐标radius    圆形的半径starAngle和endAngle 开始的角度和结束的角度anticlockwise    逆时针(true)，顺时针(false) */c.beginPath();/* Math.PI表示180度 *//* 圆多大是由半径控制的 */c.arc(150,150,100,0,Math.PI*3/2,false)c.fillStyle = 'blue'c.fill()c.closePath();</script>
</body>
</html>

二、绘制三角形

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#cav{border: 1px solid #ccc;}</style>
</head>
<body><!-- 推荐在canvas标签上去写宽和高宽高比 2 ：1 --><canvas id="cav" width="600px" height="300px"></canvas><script>let cav = document.getElementById('cav');let c = cav.getContext('2d');c.beginPath();//开始创建路径c.moveTo(10,10)c.lineTo(100,150)c.lineTo(200,10)c.lineTo(10,10)//设置线条的颜色值c.strokeStyle = 'red'//设置线条的粗细c.lineWidth = "5"//填充颜色c.fillStyle = 'blue'//填充c.fill();c.closePath();c.stroke();/* 如果需要闭合路径，开始新的起点路径时，都需要创建和关闭路径 */c.beginPath();//开始创建路径c.moveTo(210,10)c.lineTo(250,150)c.lineTo(300,10)c.lineTo(210,10)//设置线条的颜色值c.strokeStyle = 'blue'//设置线条的粗细c.lineWidth = "5"c.fillStyle = 'yellow'c.fill();c.closePath();c.stroke();</script>
</body>
</html>

三、绘制矩形

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#cav{border: 1px solid #ccc;}</style>
</head>
<body><!-- 推荐在canvas标签上去写宽和高宽高比 2 ：1 --><canvas id="cav" width="600px" height="300px"></canvas><script>let cav = document.getElementById('cav');let c = cav.getContext('2d');c.fillStyle='red'//填充矩形c.fillRect(20,20,200,100)//绘制矩形边框c.lineWidth = '10'c.strokeStyle = "pink";c.strokeRect(20,20,200,100)cav.onmousedown = function(e){let event = e||window.event;console.log(event.clientX);console.log(event.clientY);/* 清除矩形内的一块区域 */c.clearRect(event.clientX,event.clientY,300,200)}</script>
</body>
</html>

【canvas绘制图形】相关推荐

html5 canvas绘制图形,html5 Canvas绘制图形入门详解
html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome. ...
- 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绘制图形
第一步:html5页面中添加canvas元素 <canvas id="myCanvas" width="300" height="300&quo ...
微信小程序开发—(八)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绘制图形

一、绘制圆形

二、绘制三角形

三、绘制矩形

【canvas绘制图形】相关推荐

最新文章

热门文章

【canvas绘制图形】

canvas绘制图形

一、绘制圆形

二、绘制三角形

三、 绘制矩形

【canvas绘制图形】相关推荐

最新文章

热门文章

三、绘制矩形