【canvas】基础练习一 图形

最新推荐文章于 2022-03-12 11:40:52 发布
最新推荐文章于 2022-03-12 11:40:52 发布
阅读量111 收藏
点赞数

Demo1【绘制一条线】

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>demo 1</title>
</head>
<body>

<canvas id="wapper" width="200" height="200"></canvas>


<script>
	var wapper = document.getElementById('wapper'),
		_2d = wapper.getContext('2d');/*2d的绘制对象*/

	_2d.lineWidth = 10;/*设置线条宽度*/

	_2d.strokeStyle = 'red';/*设置线条颜色*/

	_2d.beginPath();/*创建新的路径*/

	_2d.moveTo(10,10);/*将画笔光标移动到画布坐标10，10*/

	_2d.lineTo(150,50);/*画一条线到150，50*/

	_2d.stroke();/*绘制定义的路径*/
</script>
</body>
</html>

　　

Demo2【改变线帽样式】

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>lineCap</title>
</head>
<body>

<canvas id="wapper" width="200" height="200"></canvas>

<script>
	var wapper = document.getElementById('wapper'),
		_2d = wapper.getContext('2d');/*2d的绘制对象*/

	_2d.lineWidth = 20;/*设置线条宽度*/
	_2d.strokeStyle = 'red';/*设置线条颜色*/


	_2d.beginPath();
	_2d.lineCap = 'butt';/*默认。向线条的每个末端添加平直的边缘。*/
	_2d.moveTo(10,10);
	_2d.lineTo(150,10);
	_2d.stroke();

	_2d.beginPath();
	_2d.lineCap = 'round';/*向线条的每个末端添加圆形线帽。*/
	_2d.moveTo(20,50);
	_2d.lineTo(150,50);
	_2d.stroke();

	_2d.beginPath();
	_2d.lineCap = 'square';/*向线条的每个末端添加正方形线帽。*/
	_2d.moveTo(20,90);
	_2d.lineTo(150,90);
	_2d.stroke();
</script>
</body>
</html>

　　

demo3【绘制矩形】

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>strokeRect</title>
</head>
<body>

<canvas id="wapper" width="500" height="500"></canvas>

<script>
	var wapper = document.getElementById('wapper'),
		_2d = wapper.getContext('2d');/*2d的绘制对象*/

	/*边框*/
	_2d.beginPath();
	_2d.lineWidth = 5;/*设置线条宽度*/
	_2d.strokeStyle = 'red';/*设置线条颜色*/
	_2d.strokeRect(10,10,200,50);/*strokeRect(起点x，起点y，矩形长，矩形宽)*/


	/*实心*/
	_2d.beginPath();
	_2d.fillStyle = 'red';/*设置颜色*/
	_2d.fillRect(10,100,100,50);/*fillRect(起点x，起点y，矩形长，矩形宽)*/
</script>
</body>
</html>

　　

demo4【圆形】

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>arc</title>
</head>
<body>

<canvas id="wapper" width="500" height="500"></canvas>

<script>
	var wapper = document.getElementById('wapper'),
		_2d = wapper.getContext('2d');/*2d的绘制对象*/

	/*边框*/
	_2d.beginPath();
	_2d.lineWidth = 2;
	_2d.arc(100,100,50,0,360);/*arc(圆中心x，圆中心y，圆半径，起始弧度，终止弧度，是否逆时针)*/
	_2d.stroke();


	/*实心*/
	_2d.beginPath();
	_2d.fillStyle = 'red';/*设置颜色*/
	_2d.arc(300,100,50,0,100*Math.PI/180,true);/*arc(圆中心x，圆中心y，圆半径，起始弧度，终止弧度，是否逆时针)*/
	_2d.fill();
</script>
</body>
</html>

　　

demo5【圆角矩形】

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>arcTo</title>
</head>
<body>

<canvas id="wapper" width="500" height="500"></canvas>

<script>
	var wapper = document.getElementById('wapper'),
		_2d = wapper.getContext('2d');/*2d的绘制对象*/

	/*边框*/
	_2d.beginPath();
	_2d.lineWidth = 2;
	_2d.moveTo(10,10);
	_2d.lineTo(100,10);
	_2d.arcTo(150,10,150,100,50);/*添加一条圆弧 起点我理解为转角的xy坐标 终点我理解为结束的xy坐标  arcTo(弧的起点的 x 坐标，弧的起点的 y 坐标， 弧的终点的 x 坐标，弧的终点的 y 坐标，弧的半径)*/
	_2d.lineTo(150,100);
	_2d.stroke();

</script>
</body>
</html>

　　

demo6【擦除】

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>clearRect</title>
</head>
<body>

<canvas id="wapper" width="500" height="500"></canvas>

<script>
	var wapper = document.getElementById('wapper'),
		_2d = wapper.getContext('2d');/*2d的绘制对象*/

	_2d.beginPath();
	_2d.fillStyle='red';
	_2d.fillRect(0,0,500,500);
	_2d.clearRect(20,20,100,200);/*clearRect(x起始坐标，y起始坐标，宽，高)*/

</script>
</body>
</html>

　　

demo7【二次贝尔曲线quadraticCurveTo】

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>二次贝尔曲线quadraticCurveTo</title>
</head>
<body>

<canvas id="wapper" width="500" height="500"></canvas>

<script>
	var wapper = document.getElementById('wapper'),
		_2d = wapper.getContext('2d');/*2d的绘制对象*/
	_2d.beginPath();
    _2d.fillStyle='#efefef';
    _2d.fillRect(0,0,500,500);

	_2d.beginPath();
	_2d.moveTo(20,20);
	_2d.quadraticCurveTo(200,20,400,400);/*quadraticCurveTo(控制点x, 控制点y, 终点x, 终点y)*/
	_2d.stroke();

</script>
</body>
</html>

demo8【三次贝尔曲线bezierCurveTo】

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>三次贝尔曲线bezierCurveTo</title>
</head>
<body>

<canvas id="wapper" width="500" height="500"></canvas>

<script>
	var wapper = document.getElementById('wapper'),
		_2d = wapper.getContext('2d');/*2d的绘制对象*/
	_2d.beginPath();
    _2d.fillStyle='#efefef';
    _2d.fillRect(0,0,500,500);

	_2d.beginPath();
	_2d.moveTo(20,20);
	_2d.bezierCurveTo(200,20,20,400,400,400);/*quadraticCurveTo(控制点1x, 控制点1y, 控制点2x, 控制点2y,  终点x, 终点y)*/
	_2d.stroke();

</script>
</body>
</html>

 

demo9【clip指定绘制区域】

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>clip指定绘制区域</title>
</head>
<body>

<canvas id="wapper" width="500" height="500"></canvas>

<script>
	var wapper = document.getElementById('wapper'),
		_2d = wapper.getContext('2d');/*2d的绘制对象*/

	_2d.arc(250,250,250,0,360*Math.PI/180);
	_2d.clip();

	_2d.beginPath();
    _2d.fillStyle='#efefef';
    _2d.fillRect(0,0,500,500);

	_2d.beginPath();
	_2d.moveTo(20,20);
	_2d.bezierCurveTo(200,20,20,400,400,400);/*quadraticCurveTo(控制点1x, 控制点1y, 控制点2x, 控制点2y,  终点x, 终点y)*/
	_2d.stroke();

</script>
</body>
</html>

　　

　

weixin_33749131
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML5——canvas小练习——函数图
loringray的博客
04-11 1532
HTML5小练习之canvas画图练习，画一个数学sin函数： 效果图如下: 代码: <!DOCTYPE html> <html> <head> <!-- Css样式 --> <style type="text/css"> .mainone { display: inli...
【Html5每日练习】canvas笑脸
boia
04-11 8549
在某个论坛游荡的时候，看到一个笑脸图样，就用canvas写了一个，代码如下 var myCanvas = document.getElementById("myCanvas"); var context = myCanvas.getContext("2d"); context.strokeStyle = "blue"; context.lineWidth = 5;
史上最全的canvas详解及练习
WaNgLu:)的博客
10-27 2021
canvas介绍 1.什么是canvas（画布） -----canvas是HTML5新增的元素，可用于通过使用JavaScript中得到脚本来绘制图形 -----canvas看起来和<img>元素很像，唯一不同的就是他并没有src和alt属性。实际上，<canvas>标签只有两个属性：width和height -----&l...
体会HTML5的canvas元素之图表练习源码
11-20
体会HTML5的canvas元素之图表练习源码
用Canvas制作剪纸效果
andyjbs2016的博客
08-16 523
在做剪纸效果之前，先介绍剪纸效果运用到的一些知识： 阴影 在Canvas之中进行绘制时，可以通过修改绘图环境中的如下4个属性值来指定阴影效果： shadowColor:CSS格式的颜色字串。默认值为rgba(0,0,0,0),即完全透明的黑色。 shadowOffsetX:阴影在X轴方向的偏移量，以像素为单位。默认值为0 shadowOffsetY：阴影在Y轴方向的偏移量，...
html5使用canvas画一条线
09-28
这篇简短的文章介绍了如何使用Canvas API来画一条线，这是一道非常适合初学者入门的练习。 首先，我们需要获取Canvas元素。在HTML中，我们可以创建一个`<canvas>`标签，并给它一个ID，例如`canvas`。然后在...
HTML5 canvas绘制七巧板图形代码
05-01
这个"HTML5 canvas绘制七巧板图形代码"实例，是初学者掌握canvas API的一个好练习，通过它我们可以深入理解HTML5的绘图功能。 首先，canvas是一个二维绘图表面，我们可以通过JavaScript来控制它的行为。在HTML中，...
html5 canvas米字格式手写文字练习代码.zip
最新发布
09-26
在JavaScript中，我们可以通过`document.createElement('canvas')`创建一个Canvas对象，并通过`canvas.getContext('2d')`获取2D渲染上下文，这是大多数网页绘图的基础。 在这个练习代码中，"米字格式"可能指的是将...
front:前端基础练习
03-29
3. **HTML5的新特性**：HTML5引入了许多新元素，如`<canvas>`用于图形绘制，`<video>`和`<audio>`用于多媒体播放，`<input type="date">`等新的输入类型，以及`<section>`和`<figure>`等。 4. **属性与值**：HTML...
java代码-图形绘图练习
07-15
`Canvas`是`java.awt`包中的一个类，专门用于绘制自定义图形。在`Canvas`的`paint`或`paintComponent`方法中，他们会重写父类的方法，添加自己的绘图逻辑。在这里，他们可以使用`Graphics`对象进行绘图，`Graphics`...
制作剪纸
06-20 147
剪纸效果展示 背景选择灰色的渐变底 如下 新建一个图层，可以使用其他的图案 或者 图形 但是建议先用简单的图案试试 镂空的就先别尝试吧 使用蒙版做一个半边 然后做另一边 方法很多 可以用自己喜欢的 使用渐变叠加 颜色 根据自己的喜好 本帖仅提供 方法具体数值 我就不提供了 1.从上面的图 我们看到 根据背景渐变的方向 光是从右上方来的 所以...
【绘制】HTML5 Canvas 剪纸效果（镂空效果）
苏一恒
08-29 1901
我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。 教程介绍、教程目录等能在README里查阅。 传送门：https://github.com/827652549/CanvasStudy 圆环剪纸 我们运用所学到的路径、阴影与非零环绕规则等知识，实现如图圆环剪纸(cutout)效果。 这是用JavaScript...
Canvas绘图中的路径描边与填充
weixin_34189116的博客
09-06 309
1.路径、描边与填充 迄今为止，在本章之中我们所绘制的唯一图形，就是通过在Canvas的绘图环境对象上调用strokeRect()方法所画的矩形。我们也通过调用fillRect()方法对其进行了填充。这两个方法都是立即生效的。实际上，它们是Canvas绘图环境中仅有的两个可以用来立即绘制图形的方法（strokeText()与fillTex...
canvas练习
qq_44361433的博客
04-07 229
1.绘制验证码 <canvas id="c1" width="300" height="150"></canvas> <script> var w=300; var h=150; function rn(max,min) { return parseInt(Math.random()...
canvas练习第1天--阳光下的雪山（无动效）
magicmilumilu的博客
09-17 387
这里写自定义目录标题图例成果代码 图例 成果 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>金楚是傻狗</title> <style type="text/css"> .left{ float:left; width...
40 个重要的 HTML5 面试问题及答案
奋斗的蜗牛
12-29 2499
本文将列出40个重要的HTML 5面试问题及答案，祝各位求职顺利。 目录 介绍Canvas和SVG图形之间的区别是什么？如何使用Canvas和SVG绘制矩形？什么是CSS选择器？如何使用ID值应用CSS样式？CSS的列布局有什么用？请解释一下CSS盒子模型？请解释CSS 3中的一些文字效果？什么是web worker，为什么我们需要他们web worker？如何添加和删除本地存储中
【Html5每日练习】canvas五彩缤纷的五角星
boia
04-14 5273
貌似是很久没碰数学的缘故，今天计算如何绘制一个五角星特别地费力，看来还得好好地学下高数啊，太虚假了~~~ 不过计算出来后还是有一点小小的错误，有两条边有点误差，大家就凑合看吧，不要见怪 var myCanvas = document.getElementById("myCanvas"); var context = myCanvas.getContext("2d"); //创建
javascript canvas生成分形图练习
cc_fys的博客
08-27 1761
html5 javascript canvas生成分形图 简单的分形图，类似于二叉树 一颗数有两个对称分支，然后每个分支又可以继续生长。用一个数组记录每一层的信息，然后一层一层迭代，每迭代一次树枝就增加一层。 可以控制迭代次数，初始树枝长度 ，长度比例等。
canvas练习1-基础
小银
03-12 747
canvas练习1-基础资料查询动态创建一个DOM掌握 document相关的函数练习(1)绘图资源1. 画笔练习(2)2. 画刷练习(3)3. 鼠标移动事件4. 鼠标点击事件5. 鼠标双击事件综合练习 资料查询 api函数文档查询地址：https://developer.mozilla.org/en-US/ 动态创建一个DOM 掌握 document相关的函数 查询某一个DOM 修改DOM相关的属性 创建一个新的DOM 练习(1) 在指定的一个div下创建一个canvas（画布) canvas可以适应
HTML5 Canvas基础教程：入门与元素详解
HTML5 Canvas入门基础教程是针对初学者设计的一系列指导，旨在帮助他们掌握这个强大的HTML5特性。Canvas是HTML5新增的一个元素，专门用于通过JavaScript进行图形绘制、动画制作和数据可视化。与传统的元素相比，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值