Canvas画布学习

最新推荐文章于 2022-07-15 17:14:38 发布
最新推荐文章于 2022-07-15 17:14:38 发布
阅读量284 收藏 1
点赞数 1
分类专栏： 其他 文章标签： Canvas学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44638960/article/details/103372041
版权

一、创建Canvas&绘制图像

<canvas id="mycanvas"></canvas>
//html中创建一个canvas
var canvas=document.getElementVyId("mycanvas");
var ctx=canvas.getContext("2D");
//获取canvas对象，获取2d的绘制环境

1）绘制一条直线：lineTo（x,y）

moveTo(x,y)  //起始位置 ，移动的起始位置；
lineTo(x,y)     //终止位置
lineWidth      //线条的宽度
strokeStyle   //线条样式，一般用于改变颜色
（以上四种操作是基于状态的绘制图形，必须使用stroke来进行实际的绘制）
stroke()         //绘制线条

2）绘制一新的图形（开始全新的路径）：beginPath（）

对于不同的路径使用不同的样式，修改的属性值会被修改，不变的数据会被沿用；

3）绘制封闭的图形：closePath（）（与beginPath成对出现）

4）颜色填充：fillStyle 填充的颜色的状态，fill() 进行颜色的实际填充；

5）rect（x,y,width,height）；在x,y位置绘制指定大小的矩形；

save和restore可以保存和恢复canvas的图形绘制环境；（保存上下文和恢复上下文）

绘制五角星函数推导如下图所示：（绘制图像只需要将10个顶点进行连接就行）

 通过transform进行简单的图形变换，transform有六个参数（每个参数的作用如下图所示）

transform具有级联的作用最后一个应用的图形将应用之前所有transform的图形变化样式，settransform可以解决此种问题； 

//星星的绘制路径图
	function PathStar(ctx){
		ctx.beginPath();//封闭路径
		//初始位置就为第一个lineto的位置
		for(var i=0;i<5;i++){
			ctx.lineTo(Math.cos((18+72*i)*Math.PI/180),
				-Math.sin((18+72*i)*Math.PI/180));
			ctx.lineTo(Math.cos((54+72*i)*Math.PI/180)/2,
				-Math.sin((54+72*i)*Math.PI/180)/2);
		}
		//标准的五角星路径，外圆半径为1，内圆半径为1/2;
		ctx.closePath();//结束绘制路径
	}

二、Canvas的常用API

1） fillStyle用于设置图形样式：（之后将newstyle赋值给fillStyle即可，strokeStyle用法与之类似）

	var newstyle=ctx.createLinearGradient(x0, y0, x1, y1);//起始和结束位置点
	newstyle.addColorStop(offset, color);//样式颜色，offset为起始和结束位置，范围【0,1】

2）ctx.arc(x, y, r, startAngle, endAngle, anticlockwise)；

x,y是指的圆心坐标，r为圆的半径，startAngle和endAngle指的是起始和结束弧度，最后一个参数是代表旋转方向；

3）贝塞尔曲线（二次）：ctx.quadraticCurveTo(cpx, cpy, x, y)；

二次贝塞尔曲线绘制（通过此网站可以快速生成曲线代码以及形状）
http://blogs.sitepointstatic.com/examples/tech/canvas-curves/quadratic-curve.html

4）贝塞尔曲线（三次）：ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)；

三次贝塞尔曲线的绘制样式测试：（通过此网站可以快速生成曲线代码以及形状）
http://blogs.sitepointstatic.com/examples/tech/canvas-curves/bezier-curve.html

（注：三次贝塞尔曲线可以实现出花瓣的样式）

5）清除矩形（画布）：一般用在canvas的动画制作中，clearRect（）

ctx.clearRect(x, y, w, h)；
x,y矩形的起始位置，w和h指矩形的宽度

三、Finally 实战

最后用canvas做一个贪吃蛇的小游戏来检验自己的学习成果：（运行截图如下）

游戏代码 （html贪吃蛇代码，如果有什么问题还请大家谅解）

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js "></script>
</head>
<body>
<div style="width:80%;margin:auto;background-color:#FFDEAD;">
<canvas id ="mycanvas" style="margin:auto; width:100%;" >
	/*canvas画布*/
</canvas>
</div>
<script type="text/javascript">
	var canvas=document.getElementById("mycanvas");//获取canvas对象
	var ctx=canvas.getContext("2d");//获取绘制环境
	canvas.width=800;
	canvas.height=380;
	var down=0;
	var snack=[[20,20],[20,40],[20,60]];
	var foodx=80;
	var foody=80;
	var foodnum=1;
	var dirction=2;//0 1 2 3 默认向右
	checked=function(){
		if(snack[0][0]==foodx&&snack[0][1]==foody){
			snack.unshift([foodx,foody]);
			return 1;//获取食物
		}
		else if(Find()==1){
			return 0;
		}
	}
	var timer=setInterval("Game()", 200) ;
	window.addEventListener('keydown', keydown,true);//键盘响应
	function Game(){
		ctx.fillStyle="red";
		ctx.clearRect(0, 0, 800, 380);//清除画布
		if(checked()==1){//游戏判断
			showfood();
		}
		else if(checked()==0){
			clearInterval(timer);
			foody="";
			foodx="";
		}
		selfMove();//蛇自己移动
		ctx.fillRect(foodx,foody,20,20);//绘制食物
		showsnack();//绘制蛇
		down=0;
	}
	function selfMove(){
		if(dirction==0){
			if(snack[0][0]-20>=0)
			   snack.unshift([snack[0][0]-20,snack[0][1]]);
			else{
				snack.unshift([780,snack[0][1]]);
			}
		}
		else if(dirction==1){
			if(snack[0][1]-20>=0)
			snack.unshift([snack[0][0],snack[0][1]-20]);
		    else{
		    	snack.unshift([snack[0][0],360]);
		    }
		}
		else if(dirction==2){
			if(snack[0][0]+20<=800)
			snack.unshift([snack[0][0]+20,snack[0][1]]);
		    else{
		    	snack.unshift([0,snack[0][1]]);
		    }
		}
		else if(dirction==3){
			if(snack[0][1]+20<=360)
			snack.unshift([snack[0][0],snack[0][1]+20]);
		    else{
		    snack.unshift([snack[0][0],0]);
		    }
		}
		snack.pop();
	}
	function keydown(e){
		//left 37 up 38 right 39 down 40;
		if(e.keyCode==37&&dirction!=2){
			dirction=0;
		}
		if(e.keyCode==38&&dirction!=3){
			dirction=1;
		}
		if(e.keyCode==39&&dirction!=0){
			dirction=2;
		}
		if(e.keyCode==40&&dirction!=1){
			dirction=3;
		}//按键响应

	}
	function showsnack(){
		for(var i=0;i<snack.length;i++){
			ctx.fillStyle="green";
			ctx.fillRect(snack[i][0], snack[i][1], 20, 20);
		}
	}
	function showfood(){
			var x,y;
			x=Math.floor(Math.random()*29+1)*20;
			y=Math.floor(Math.random()*15+1)*20;
			foodx=x;
			foody=y;
	}
	function Find(){
		for(var i=1;i<snack.length;i++){
			if(snack[i][0]==snack[0][0]&&snack[i][1]==snack[0][1]){
				return 1;//游戏结束
			}
		}
		return 0;//游戏继续
	}
</script>	
</body>
</html>

 

）梦想之深邃（
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Canvas画布线条组合动画特效特效代码
03-20
这个“Canvas画布线条组合动画特效特效代码”是利用Canvas API创建的2D彩色线条花环几何体动画，用于增强网页的视觉效果和用户体验。下面我们将深入探讨Canvas画布以及如何实现这种线条动画特效。 首先，Canvas API...
canvas基础简单易懂教程（完结，多图）
forever
03-02 1880
Canvas API 提供了一个通过JavaScript 和 HTML的元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。 Canvas API 主要聚焦于 2D 图形。而同样使用元素的 WebGL API 则用于绘制硬件加速的 2D 和 3D 图形。
今日学习画布
asdfg_asdsa的博客
07-15 224
画布基础
学习简单的画布Canvas(canvas学习一)
这个博客记录我的成长。(专注前端开发，ehcarts图表开发，接定制)，有需要请站内私信。
04-07 1384
画一个正方形 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-e...
＜canvas＞画布-学习笔记
CYSNLD的博客
07-15 422
画布标签的使用，设置图形连接点、画布的使用。使用画布绘制圆、椭圆、虚线。
【学习笔记25】画布canvas+案例
m0_60525480的博客
09-16 1862
canvas属于html元素 H5新元素 需要结合js ,主要用来绘制2d图形 在页面上放置一个canvas元素 就相当于放置了一块画布 可以绘制路径 矩形 圆形 字符 图像 属性： width 默认值 300px height 默认值 150px 注意点：canvas需要写闭合标签 <canvas></canvas> 一般不建议使用css设置它的宽高 方法： ...
QML--Canvas画布实现矩形圆形等圈定
01-10
Canvas组件的核心是它的`绘画上下文`（Painting Context），这个上下文提供了多种绘图方法，如`fillRect()`、`strokeRect()`、`drawCircle()`等，用于在画布上填充或描边各种形状。在QML中，你可以通过JavaScript...
HTML5 Canvas画布源码
05-16
这个“HTML5 Canvas画布源码”项目显然利用了Canvas的这一特性，构建了一个功能丰富的在线画板应用。这个应用具备了画笔、线宽调节、颜色选择、橡皮擦、文本框、图片上传以及保存等功能，非常适合教师进行在线教学时...
html5 canvas画布绘制圆形时钟代码
09-08
在这个“html5 canvas画布绘制圆形时钟代码”示例中，我们将深入探讨如何利用Canvas API来创建一个功能完备的圆形时钟。 首先，你需要在HTML文件中创建一个`<canvas>`元素，它将作为我们的画布。例如： ```html <!...
Canvas学习记录：画布设置及简单图形绘制
努力努力再努力w
06-17 539
概览 <canvas>是一个可以使用脚本(通常为JavaScript)来绘制图形的 HTML 元素 类似<img>，但只有两个属性：width 和 height (初始化为 width: 300px ， height：150px) 用width和height属性为明确规定宽高，而不是使用CSS。 getContext() :获得渲染上下文和它的绘画功能 检查浏览器是否支...
html5的画布学习小总结
jie_kong的专栏
09-08 608
。。
[js高手之路] html5 canvas系列教程 - 认识canvas以及基本使用方法
weixin_34414650的博客
09-25 220
canvas是html5中引入的一个新元素，俗称画布，既然是画布，当然是用来画图的。canvas技术指的是利用javascript操作canvas元素绘制图形的技术，要使用canvas,一定要浏览器支持canvas，谷歌和火狐的支持性很好，IE8不支持。你可以参考这个网站，查看canvas的支持性：http://www.caniuse.com/#search=canvas，当然他还能查询到css3...
HTML5_canvas 画布
aof26372的博客
11-20 174
<canvas></canvas> 画布 <canvas id="my_canvas" width="400" height="400"> 您的浏览器不支持 canvas，建议更换浏览器</canvas> 用于在网页上绘制图形 canvas 是一个 inline-block 行内块元素 canvas 默...
自学Canvas画布 随笔
weixin_30339457的博客
10-08 112
一、Canvas能做什么? 　　canvas是HTML5中的新元素，可以使用javascript用它来绘制图形、图标、以及其它任何视觉性图像。它也可用于创建图片特效和动画。如果我们掌握了完整的命令，我们可以用canvas创建丰富的web应用程序。如果我们想很好的使用canvas，我们首先应该很好的掌握javascript。 这篇文章是一篇基础教程，能了解一些设计方法。比如用HTML5 canv...
js学习之canvas的基础与应用(一)
domino~~的博客
08-18 630
js学习之canvas的基础与应用(一) canvas中文可以理解为画布，我们可以在上面画出自己想要的图形。对于这个标签，大家在学习html5时就会了解到。在最初接触canvas会有很多的疑惑之类的，我自己也是这样的。当深入了解了之后，发现其并不是那样的难，那...
Canvas绘制饼状图、绘制文字、绘制图像
知之为知之，不知为不知
08-27 1511
canvas 绘制圆弧；canvas 绘制扇形；canvas 绘制饼形图；canvas 绘制圆角矩形；canvas 绘制文字；canvas 设置文字属性；canvas 绘制图片；canvas 平移转换；canvas 旋转转换；canvas 缩放转换；canvas 绘制一个n等分的圆；canvas 绘制饼状图；canvas 绘制折线图；
从0开始canvas系列一 --- canvas画布
qq_41361668的博客
04-10 5356
什么是canvas canvas是HTML5新增的元素，通过javascript脚本来完成图形的绘制。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。 简单来说，canvas提供了一张画布，调用getContext属性（可以是2d或者WebGL 3d）定义画笔，通过设置图像的填充或者描边属性，定义图形的绘图方式，完成一次图形的绘制，每次绘制都是已绘制路径作为一个绘制单元 每一次绘制过程可以总结为以下步骤 //获取画布 const canvas=document.querySel
画布设置（style设置宽度，高度 和直接写canvas的宽度，高度）的不同影响
weixin_40098371的博客
07-10 4138
今天在进行画布学习的时候，出现了下面的问题：代码写的是画的圆形。结果却是椭圆形。经过讨教和资料查询，发现为题出现在上面的画布定义上面。修改代码后，问题消失。在进行跨步宽度和高度定义的时候，需要搞清楚两个概念：1.画布的宽和高（ps新建画布的宽和高）；2.画布所在画板的宽和高（例如ps打开后的窗口）；默认的画板、画布的宽和高是都是300*150的。但在画布上设置style属性的话，相当于把画板的宽和...
python tkinter canvas画布
最新发布
06-28
### 回答1： Python Tkinter的Canvas（画布）是一个可以用来绘制图形的小部件。它允许你在窗口上创建各种形状的图形，包括线条、矩形、圆形、椭圆、多边形等。你可以在画布上设置颜色、大小、位置等属性，并通过代码来操纵这些属性。 创建一个画布的基本步骤如下： 1. 导入Tkinter模块 2. 创建主窗口 3. 创建Canvas对象并指定宽度和高度 4. 使用各种形状的绘图方法来创建图形 5. 使用pack()或grid()方法将Canvas添加到主窗口中 例如，下面的代码创建一个大小为400x400像素的画布，并在其中绘制一个矩形和一个椭圆： ``` python from tkinter import * root = Tk() canvas = Canvas(root, width=400, height=400) canvas.pack() # 绘制矩形 canvas.create_rectangle(50, 50, 150, 150, fill="blue") # 绘制椭圆 canvas.create_oval(200, 200, 300, 300, fill="red") root.mainloop() ``` 这里使用了Canvas对象的`create_rectangle()`和`create_oval()`方法来创建矩形和椭圆，分别指定它们的左上角和右下角坐标，并设置了填充颜色。这些形状将被添加到画布中，并通过`pack()`方法将画布添加到主窗口中。 Canvas还有许多其他的方法和属性可以用来控制画布中的图形，可以根据需要进行学习和使用。 ### 回答2： Python Tkinter是一个用于图形用户界面(GUI)编程的Python工具包。Tkinter包括许多控件，例如按钮、标签和画布。画布是Tkinter中最灵活的控件之一，它是一个以像素为单位的矩形区域，可以在上面绘制图像、文本和形状。_canvas_ 组件是 Tkinter 的画布组件，它被用来实现2D图形。 使用_canvas_组件，我们可以轻松创建自定义图形应用程序。canvas提供了许多方法来绘制不同类型的图像，例如线、矩形、椭圆、弧、多边形等。在 Tkinter 中，_canvas_ 是一个单独的组件，常与其他 Tkinter 组件一起使用，例如按钮、列表框和文本框。 在Python中，使用Tkinter Canvas控件绘制图形可以分为以下三个步骤： 1. 创建_canvas_：在 Tkinter 窗口中创建_canvas_对象。 2. 绘制图形：使用_canvas_提供的各种方法在_canvas_中绘制具体图形。 3. 添加_canvas_到窗口：使用_grid()或_pack()等 Tkinter 布局方法将_canvas_添加到应用程序窗口中。 下面是一些_canvas_控件的示例代码： ``` python from tkinter import * root= Tk() canvas = Canvas(root, width = 300, height = 300) canvas.pack() canvas.create_rectangle(10, 10, 200, 200, fill="red") canvas.create_line(0, 0, 300, 300, fill="blue") root.mainloop() ``` 此代码创建一个大小为300*300像素的_canvas_，并在其上绘制了红色矩形和蓝色直线。 总之，画布是 Tkinter 极为有用的组件之一，它可以用于绘制各种图形并轻松地创建自定义图像应用。花费一些时间学习_canvas_ 的各种方法和特性，以使您的 Python 图形编程技能更加丰富和多样化。 ### 回答3： Python tkinter框架是Python语言中常用的GUI工具包，其中的canvas画布模块提供了强大的绘图能力，可以用于创建各种复杂的图形界面。 canvas画布模块提供了一个可供绘制的空间，可以使用它来绘制图形、显示文本和图片等。在canvas中，我们可以利用一些基本的绘图元素，如矩形、椭圆、折线、曲线等，以及对它们的填充和边框进行操作，创建出我们需要的各种图形。 canvas画布模块主要用到以下几种类： 1. Canvas类：它是我们在程序中创建画布的类，它提供了各种绘图方法和工具。 2. Item类：它是画布上的所有绘图元素的基类，包括矩形、椭圆、折线、曲线、文本等。 3. 绘制方法：包括create_line()、create_rectangle()、create_oval()、create_polygon()、create_text()等，可以根据需要选择合适的方法进行绘制。 在绘制图形时，canvas也提供了许多常用的属性设置，如颜色、线条粗细、填充等等。通过这些属性的设置，我们可以最终创建出自己想要的图形。 此外，canvas画布模块还支持一些常见的事件响应机制，例如鼠标事件、键盘事件、聚焦事件等，我们可以通过绑定这些事件的响应函数，实现与用户的交互。 总之，Python tkinter canvas画布是一个非常强大的绘图工具，它可以帮助我们实现各种复杂的界面和图形，如果你需要开发GUI应用程序，canvas模块是一个不错的选择。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值