【canvas】基础练习

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【】

123

demo6【】

123

demo7【】

时间： 2024-10-09 15:46:42

【canvas】基础练习的相关文章

canvas基础知识

低版本的ie不支持html5,需要引入excanvas.js来让ie支持canvas.检测<canvas id="canvas" width="150" height="200" > 你的浏览器不支持canvas</canvas>var canvas = document.getElementById('canvas');if(canvas.getContext) alert('支持canvas'); >> 绘

canvas基础绘制-绚丽倒计时

效果图: html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ball</title> <script src="digit_1.js"></script> <script src="countdown.js"></

canvas基础绘制-绚丽时钟

效果图: 与canvas基础绘制-绚丽倒计时的代码差异: // var endTime = new Date();//const声明变量,不可修改,必须声明时赋值: // endTime.setTime( endTime.getTime() + 3600*1000);//当前时间向后一小时: var curShowTimeSeconds = 0; function getCurrentShowTimeSeconds() { var curTime = new Date();//获取目前时间: /

五分钟学会 Canvas 基础（二）

0. 前言相信各位小伙伴读了之前的文章,对 Canvas 基础已经有了一定的认识和了解,但是大家也一定记得我在上一篇文章留了一个小的坑. 就是我没有告诉大家该如何去绘制圆,之所以没有说是因为绘制圆实际上是因为 CanvasRenderingContext2D 对象只提供了两个绘制矩形的方法,并没有直接提供绘制圆,椭圆等几何图形的方法.为了在 Canvas 上绘制更复杂的方法,必须在 Canvas 上启用路径,借用路径来绘制图形. 那么我们现在就一起来看一看,该如何使用路径来绘制圆等图形吧. -

Android Graphics专题（1）--- Canvas基础

作为Android Graphics专题的开篇,毫无疑问,我们将讨论Android UI技术的核心概念--Canvas. Canvas是Android UI框架的基础,在Android的控件体系中,所有容器类.控件类在实现上都依赖于Canvas,界面的绘制实质上都是Canvas绘制的.本文将讨论Canvs的由来,并通过实例展示Canvas的基础用法. 对于应用开发而言,我们可以不去深究Canvas与Android 控件体系的实现细节,但明白Canvas与控件的关联有助于我们更好的使用Canvas

11.分钟学会 Canvas 基础（二）

Canvas基础认识

HTML5 Canvas 简单的说就是js+html5可以自定义绘制任何图形认识Canvas元素 <canvas id="canvas" width="500" height="500">  </canvas> 上面即是一个标准的Canvas的元素,暂时先当一个div去理解,只不过这个Canvas可以作图而已. 认识2D渲染上下文通过js去访问,这

canvas 基础知识整理

canvas这个 HTML 元素是为了客户端矢量图形而设计的.它自己没有行为,但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上. html的基本结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset=UTF-8> <title>Document</title> <style> #myCanv

canvas 基础

canvas是html5新设的元素对象,它的存在就相当于在浏览器窗口内给我们准备出canvas元素的区域的空白画布让我们随意填写,当然,画画的“笔”就是canvas给我们的接口啦.另外canvas是按照我们所设的代码规则按像素将图像画出的,相当于位图.<canvas>默认定义大小为300像素宽150像素高,一般会在canvas标签内设置canvas大小,例如,<canvas width="600" height="200"></canv

【转】五分钟学会 Canvas 基础（一）

原文:http://www.jianshu.com/p/d9ec1ef9c1e8 0.前言最近忙里偷闲,来写的这篇文章,但是中午出去吃个饭,回来因为自己的误操作,把上午的文章全删除了,还没法找回. 小编真的是瞬间觉得整个人生都灰暗了. 心塞,这次真的不想多说什么了. -------------我是华丽的分割线-------------- 终于把这篇文章写完了,关于本文,针对读者主要是之前从未接触过 Canvas的同学.当然,你要学 canvas 一定要有 JS 基础啦. 其次就是,因为前前后后