初涉canvas

最新推荐文章于 2024-08-21 08:35:58 发布
最新推荐文章于 2024-08-21 08:35:58 发布
阅读量769 收藏
点赞数
分类专栏： HTML 5 web前端 文章标签： canvas HTML 5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014395524/article/details/47359369
版权

        <canvas>标签，是HTML 5 中新定义的一组标签，它可以定义图形，比如图表和其他图像，但是，需要注意的是，<canvas>标签只是图形容器，必须使用脚本来绘制图形。一般在HTML文档中使用<canvas>标签时，需要给它设置一个 id，方便在 javascript 脚本中引用。比如：

        <canvas id="canvas">当前浏览器不支持Canvas，请更换浏览器后再试</canvas>

        注意：如果当前浏览器不支持<canvas>标签，则会显示<canvas></canvas>中的内容，即“当前浏览器不支持Canvas，请更换浏览器后再试”。

        获取 canvas : var canvas = document.getElementById("canvas"); //获取canvas

        给 canvas 指定大小时，尽量不要使用 CSS 样式，直接定义 canvas 的 width 和 height 属性(设置时没有单位)

        <canvas>标签属性：canvas.width = 600 ; 

                                         canvas.height = 500; 

                                         var context =canvas.getContext("2d"); //获取canvas的上下文绘图环境(这里是2d环境)

        canvas 中的绘图是基于状态绘制，绘制的方法有：

            （1）绘制直线：

                context.lineWidth = 5; //设置线条的宽度

                context.strokeStyle = "#005588";//描述的是线条的样式，主要指线条的颜色（可以使用CSS样式设置）

                context.moveTo(x, y); //状态设置：绘制的起点坐标（x, y）,以canvas的左上角为参考点

                context.lineTo(x, y); //状态设置：绘制的终点坐标（x, y）

                context.stroke(); //绘制

demo1:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>绘制直线</title>
</head>
<body>
    <canvas id="canvas" style="margin:30px auto;border:1px solid #aaa;display:block;">当前浏览器不支持Canvas，请更换浏览器后再试</canvas>

    <script type="text/javascript">
        window.onload = function(){
        	//获取canvas及绘图的上下文环境
        	var canvas = document.getElementById('canvas');
        	var context = canvas.getContext('2d');

        	//设置canvas的大小
        	canvas.width = 500;
        	canvas.height = 400;
        	context.lineWidth = 5; //设置线条的宽度
        	context.strokeStyle = '#005588'; //设置线条颜色
        	context.moveTo(60,60);//绘制起点坐标
        	context.lineTo(400,350);//绘制的第一条线段的终点坐标，也是下一条线段的起点坐标
        	context.lineTo(60,350);
        	context.lineTo(400,200);
        	context.stroke();//绘制直线
        }
    </script>
</body>
</html>

demo1效果：

             

            （2）绘制弧线：

                context.arc( centerx, //圆心的横坐标
                                    centery, //圆心的纵坐标
                                    radius, //圆弧的半径
                                    startingAngle, //弧线从哪个弧度值开始
                                    endingAngle, //弧线结束于哪个弧度值
                                    anticlockwise = false //可选参数，描述绘制弧线是以顺时针（值为false,默认情况下），还 是逆时针( anticlockwise = true )

                注意：这里的弧度值及其位置是固定的，如下图所示：

            
                )

demo2:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>绘制弧线</title>
</head>
<body>
    <canvas id="canvas" style="margin:30px auto;border:1px solid #aaa;display:block;">当前浏览器不支持Canvas，请更换浏览器后再试</canvas>

    <script type="text/javascript">
        window.onload = function(){
        	//获取canvas及绘图的上下文环境
        	var canvas = document.getElementById('canvas');
        	var context = canvas.getContext('2d');

        	//设置canvas的大小
        	canvas.width = 300;
        	canvas.height = 300;
        	context.lineWidth = 3; //设置线条的宽度
        	context.strokeStyle = '#005588'; //设置线条颜色
        	context.arc(80, 80, 50, 0, 1.5*Math.PI, false); //顺时针从 0 pi到 1.5 pi
        	//context.arc(220, 80, 50, 1*Math.PI, 2*Math.PI, true); //逆时针从 1 pi 到 2 pi
        	context.stroke();
        }
    </script>
</body>
</html>

demo2效果：

                

            （3）图形着色：

                context.fillStyle = "rgb(2,100,30)";//定义填充颜色

                context.fill();

demo3:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>图形着色</title>
</head>
<body>
    <canvas id="canvas" style="margin:30px auto;border:1px solid #aaa;display:block;">当前浏览器不支持Canvas，请更换浏览器后再试</canvas>

    <script type="text/javascript">
        window.onload = function(){
        	//获取canvas及绘图的上下文环境
        	var canvas = document.getElementById('canvas');
        	var context = canvas.getContext('2d');

        	//设置canvas的大小
        	canvas.width = 500;
        	canvas.height = 400;
        	context.lineWidth = 3; //设置线条的宽度
        	context.strokeStyle = '#005588'; //设置线条颜色
        	context.moveTo(60,60);
        	context.lineTo(400,350);
        	context.lineTo(60,350);
        	context.lineTo(60,60);
        	context.fillStyle = 'yellow';
        	context.fill();
        	context.stroke();
        }
    </script>
</body>
</html>

demo3效果：

            

            （4）绘制多条路径：

                context.beginPath(); //声明从此时起开始了一段新的路径

                context.closePath(); //结束当前路径,如果当前绘制路径不是封闭的，closePath()会自动将当前路径使用一条线段连接起来

                beginPath() 和 closePath() 不一定成对出现。。。。。。

demo4:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>绘制多条路径</title>
</head>
<body>
    <canvas id="canvas" style="margin:30px auto;border:1px solid #aaa;display:block;">当前浏览器不支持Canvas，请更换浏览器后再试</canvas>

    <script type="text/javascript">
        window.onload = function(){
        	//获取canvas及绘图的上下文环境
        	var canvas = document.getElementById('canvas');
        	var context = canvas.getContext('2d');

        	//设置canvas的大小
        	canvas.width = 500;
        	canvas.height = 400;
        	context.lineWidth = 3; //设置线条的宽度
        	context.strokeStyle = '#005588'; //设置线条颜色
        	context.beginPath();
        	context.moveTo(60,60);
        	context.lineTo(400,350);
        	context.lineTo(60,350);
        	context.closePath();//自动封闭当前路径
        	context.fillStyle = 'yellow';
        	context.fill();
        	context.stroke();

        	context.beginPath();
        	context.moveTo(460,60);
        	context.lineTo(400,120);
        	context.lineTo(400,200);
        	context.lineTo(420,300);
        	context.closePath();

        	context.stroke();
        }
    </script>
</body>
</html>

demo4效果：


一个简单的综合案例——七巧板

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>七巧板</title>
</head>
<body>
    <canvas id="canvas" style="border: 1px solid #aaa;display: block;margin:50px auto;">当前浏览器不支持Canvas，请更换浏览器后再试</canvas>

    <script type="text/javascript">
        var tangram = [
            {p:[{x:0,y:0},{x:800,y:0},{x:400,y:400}],color:'#caff67'},
            {p:[{x:0,y:0},{x:400,y:400},{x:0,y:800}],color:'#67becf'},
            {p:[{x:800,y:0},{x:800,y:400},{x:600,y:600},{x:600,y:200}],color:'#ef3d61'},
            {p:[{x:600,y:200},{x:600,y:600},{x:400,y:400}],color:'#f9f51a'},
            {p:[{x:400,y:400},{x:600,y:600},{x:400,y:800},{x:200,y:600}],color:'#a594c0'},
            {p:[{x:200,y:600},{x:400,y:800},{x:0,y:800}],color:'#fa8ccc'},
            {p:[{x:800,y:400},{x:800,y:800},{x:400,y:800}],color:'#f6ca29'}
        ];
        window.onload = function(){
        	var canvas = document.getElementById('canvas');
        	var context = canvas.getContext('2d');
        	canvas.width = 800;
        	canvas.height = 800;
        	for(var i = 0; i < tangram.length; i++){
        		draw(tangram[i], context);
        	}
        }

        function draw(piece, cxt){
        	cxt.beginPath();
        	cxt.moveTo( piece.p[0].x, piece.p[0].y );
        	for( var j = 1; j < piece.p.length; j++ ){
        		cxt.lineTo( piece.p[j].x, piece.p[j].y );
        	}
        	cxt.closePath();

        	cxt.fillStyle = piece.color;
        	cxt.fill();

        	cxt.strokeStyle = 'black';
        	cxt.lineWidth = 3;
        	cxt.stroke();
        }
    </script>
</body>
</html>
七巧板案例效果 请大家自行运行代码进行查看。。。

何必诗债换酒钱
关注
专栏目录
NVIDIA CANVAS 使用初体验
LavaStrom
06-25 1万+
目录 第一章 NVIDIA CANVAS 使用初体验 1.1NVIDIA CANVAS是什么 1.2 系统环境要求 1.2 官网下载 1.3 安装 1.4 打开 1.5 尝试画画 1.6 查看效果 1.7 尝试导出格式，格式大全 1.8 最终效果贴图，桌面 1.9 完结 第一章 NVIDIA CANVAS 使用初体验 1.1NVIDIA CANVAS是什么 NVIDIA CANVAS 是使用 AI 将简单的笔触变成逼真的风景图。快速创建背景或加速探索概念，让您可以将...
html2canvas图片的文字偏移,html2canvas在Vue项目踩坑-生成图片偏移不完整
weixin_42299873的博客
06-04 3509
背景最近做一个Vue项目需求是用户长按保存图片，页面的数据是根据不同id动态生成的，页面渲染完生成内容图片让用户长按保存的时候，把整个页面都保存起来。在项目遇到的坑是图片能生成，可是生成的图片总是往左偏移一部份内容，让显示的图片不完整页面渲染的内容，而生成的图片效果要跟页面渲染的内容一致，下面是渲染的效果而实际生成的图片是不完整的测试：多次生成图片发现图片发生偏移的位置都不相同，而同一个特性是往左...
小程序初涉——页面滑动以及canvas层级问题
HELLO WORD
08-13 4875
关于canvas的层级问题 在小程序里，map、canvas、video、textarea等 组件是由客户端创建的原生组件，它们的层级是最高的，不能通过 z-index 控制层级，因此在实际开发过程中就会遇到很多由此产生的问题。 最近在做一个小程序的项目，就这个现象遇到了以下问题： 问题一：浮动问题联动的页面滑动问题 如上图，页面只有一屏，在开发工具中都可以正常展示，但在真机环境下...
初涉WebGL
weixin_33873846的博客
11-15 141
之前一直在捣鼓Vue和React栈，对组件化架构项目有了些理解和体会。今天尝尝WebGL，当然，并不打算现在深入，只是略作了解，我知道这个坑很深。 js的图形库、3d库也有好几款比较流行的，如游戏开发方面的three.js、数据可视化的图表库echarts.js、GIS方面的百度地图、google地图等，最近打算学习下。 言归正传，以前学canvas的时候，只是简单地学习2d context的...
小程序初涉——倒计时效果
HELLO WORD
08-14 588
近期做的一个类似头脑王者小程序项目，其中需要实现一个倒计时圆环的效果，如下图： 如果是平时的pc或H5的项目，要实现这个效果，可能选择性还会再多一些，包括使用SVG,transform等来实现。考虑到小程序的一些局限性，所以选择用canvas+js来实现。 canvas画圆环 话不多说直接贴代码,首先是wxml部分，需要定义canvas的canvas-id，也就是canvas的唯一标...
初涉View
jianchibuxie5的专栏
07-25 511
在View的学习中，借鉴以往JavaME的经验，这里首先把它们使用到的一些类、方法等简单做下类比：Android-->JavaMEView-->CanvasCanvas-->GraphicsonDraw(Canvas canvas)-->paint(Graphics g);...
surfaceView开发游戏初涉一
weixin_34377919的博客
01-29 70
在使用surfaceView开发一个小游戏的过程中，遇到的一些问题记录：一、使用类A继承自surfaceView，在构造函数中使用getHolder()得到SurfaceHolder对象，SurfaceHolder可以得到Canvas对象，有了Canvas对象就可以做画图相关的操作了。 SurfaceHolderholder=getHolder(); Can...
Easycanvas：下一代Canvas渲染引擎，轻触未来交互的钥匙
最新发布
gitblog_00270的博客
08-21 874
Easycanvas：下一代Canvas渲染引擎，轻触未来交互的钥匙 easycanvas数据驱动、2D&3D、渐进式Canvas库，支持JSX，配备Chrome调试插件，支持微信小游戏、物理引擎等。项目地址:https://gitcode.com/gh_mirrors/ea/easycanvas 在数字创意与游戏开发的浩瀚宇宙里，Easycanvas犹如一颗璀璨的新星，以其革命性的技术与高度可...
Unity3D 初涉门径 之登录界面(二)
JeterPong's Column
03-28 1084
前言：之前介绍了，登录界面的操作实现，不过是都是在代码里实现的。今天学习一下，在编辑器新建控件实现界面操作(当然，按钮操作还是要用到代码的)。(～￣▽￣)～说明： 需要 create 两个空的对象(GameObject)用来存放 账号输入控件(水平)、密码输入控件(水平) create 一个 Image 来建立一个 登录面板(背景)界面操作： 首先，在当前面板中新建一个 画布(Canvas)
canvas教程
08-16
本资源提供了详细的 canvas 使用技巧和相关技术阐述，对于初涉 JavaScript 和 canvas 相关技术的朋友有极大地帮助。 canvas 是新的 HTML 元素，可以通过 Script（通常是 JavaScript）绘制图形，用于画图、组合图像，...
Android中Box2d初涉小例子
03-11
在这个"Android中Box2D初涉小例子"中，我们将探讨如何在Android应用中集成和使用Box2D来创建逼真的物理模拟。 1. **Box2D简介**： Box2D是由Erin Catto开发的2D物理引擎，它允许开发者创建具有真实物理行为的游戏...
Vue 中 this.$router 与 this.$route 的区别 以及 push() 方法
热门推荐
VirgoYellow 的专栏
03-05 9万+
官房文档里是这样说明的： 通过注入路由器，我们可以在任何组件内通过this.$router访问路由器，也可以通过this.$route访问当前路由 可以理解为： this.$router 相当于一个全局的路由器对象，包含了很多属性和对象（比如 history 对象），任何页面都可以调用其 push(), replace(), go() 等方法。 this.$route 表示当前路由...
关系代数运算之连接运算
VirgoYellow 的专栏
04-20 3万+
原文转自https://blog.csdn.net/f_kld/article/details/77168351 1.关于连接的理解：连接也称为θ连接，关系R与关系S的连接运算是从两个关系的笛卡尔积中选取属性间满足一定条件的元组形成一个新的连接。这个条件为θ(比较运算符，如>、<、=)。 2.自然连接：是一种特殊的等值连接，比较两个关系中分量相同的属性组，并且在结果中把重复的属性...
JS 比较两个字符串的相似度
VirgoYellow 的专栏
09-05 9165
function similar(s, t, f) { if (!s || !t) { return 0 } var l = s.length > t.length ? s.length : t.length var n = s.length var m = t.length var d = [] f = f || 3...
谷歌浏览器被hao123劫持
VirgoYellow 的专栏
07-15 8198
谷歌浏览器被hao123劫持了。。。简直了。。。无力吐槽。。。 兜兜转转试了几种方法（因为实在不想改chrome.exe的名字，各种方法均以失败告终。。），最终不得不向现实低头，修改chrome.exe的名字： 现在的做法： 1、卸载重装 chrome 2、删除桌面的 Google Chrome.exe 快捷方式 2、修改安装目录下的 chrome.exe 名称，改成“谷歌浏览器.exe...
js 跳出 forEach 循环
VirgoYellow 的专栏
01-26 7766
使用 forEach 的时候，是不能通过 return 来跳出循环的（只可以终止 return 语句后面代码的执行，并不会终止整个循环），比如下面的例子???? var list = [ {id: 'id_1', name: 'name_1', price: 1}, {id: 'id_2', name: 'name_2', price: 2}, {id: 'id_3', name: 'name_3', price: 3}, {id: 'id_4', name: 'name_4
sublime text 3 设置在不同浏览器中运行的快捷方式
VirgoYellow 的专栏
05-17 6762
自从遇到sublime text 后，一下子就喜欢上了这款软件，强大的插件支持功能，真的让人爱不释手！可是，不得不说，它有一个小缺点，就是只能在默认的浏览器中打开（貌似也没有插件可以解决这个问题（个人拙见））。。不知道别人怎么想，反正强迫症的我是有些容忍不了，，花了不少时间，终于解决了这个问题，下面就来看看怎么设置不同浏览器运行的快捷方式吧！         安装 SideBarEnhancem
overflow属性
VirgoYellow 的专栏
07-16 6095
overflow属性： overflow有四个属性值：visible(默认值)、hidden、scroll、auto; 当页面有上下两个div层时，由于上面的div文字内容过多，超出该层的高度和宽度，此时上面的div层中的内容会覆盖到下面的div层之上。如下图： visible: overflow的visible属性是默认值，也就是说，最初说到的那种情况就是visible在起作
解决Chrome不支持本地Ajax请求的问题
VirgoYellow 的专栏
07-21 5984
在写一个用传统javascript实现ajax例子的时候，在chrome中遇到了一个问题：         XMLHttpRequest cannot load file:///C:/Users/Administrator/Desktop/test.php. Cross origin requests are only supported for protocol schemes: http,
HTML5 Canvas技术详解
通过JavaScript，开发者可以利用Canvas元素来动态地绘制、修改和操作图像。这个技术对于创建数据可视化、游戏、艺术作品以及其他需要动态图形的应用来说尤其有用。 本书《HTML5 Canvas》分为多个章节，涵盖了以下...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值