一波HTML5Canvas基础绘图实例代码集合_html5教程技巧
作者:IP-COM东莞办事处_426 | 来源:互联网 | 2017-05-11 14:13
这篇文章主要介绍了一波HTML5Canvas基础绘图实例代码集合,包括圆形矩形圆角等基本图形的绘制,需要的朋友可以参考下
基本绘制
XML/HTML Code复制内容到剪贴板
- var canvas = document.getElementById('canvas');
- if (canvas.getContext) {
- var context = canvas.getContext('2d');
- // 线宽
- context.lineWidth = 4;
- // 画笔颜色
- context.strokeStyle = 'red';
- // 填充色
- context.fillStyle = "red";
- // 线帽类型
- context.lineCap = 'butt'; // round, square
- // 开始路径
- context.beginPath();
- // 起点
- context.moveTo(10,10);
- // 终点
- context.lineTo(150,50);
- // 绘制
- context.stroke();
- }
矩形
XML/HTML Code复制内容到剪贴板
- var canvas = document.getElementById('canvas');
- if (canvas.getContext) {
- context.beginPath();
- context.strokeRect(10,10,70,40);
- // 矩形的另一种方式
- context.rect(10,10.70,40);
- context.stroke();
-
- // 实心矩形
- context.beginPath();
- context.fillRect(10,10,70,40);
- // 另一种方式实心矩形
- context.beginPath();
- context.rect(10,10,70,40);
- context.fill();
- }
圆形
XML/HTML Code复制内容到剪贴板
- var canvas = document.getElementById('canvas');
- if (canvas.getContext) {
- context.beginPath();
- // 圆中心坐标x, 圆中心坐标Y, 圆弧半径, 起始角度,终止角度,是否逆时针
- // 第4个参数和第五个参数是要传入的弧度,如果画30角度,需要将其转化为弧度 30 * Math.PI / 180
- context.arc(100,100,70,0,130 * Math.PI / 180, true);
- context.stroke();
- context.fill();
- }
圆角
XML/HTML Code复制内容到剪贴板
- var canvas = document.getElementById('canvas');
- if (canvas.getContext) {
- context.beginPath();
- context.moveTo(20,20);
- context.lineTo(70,20);
- // 为一条路径画弧度p1.x p1.y p2.x, p2.y 弧半径,
- context.arcTo(120,30,120,70, 50);
- context.lineTo(120,120);
- context.stroke();
-
- // 擦除canvas 画板
- context.beginPath();
- context.fillRect(10,10,200,100);
-
- // 擦除区域
- context.clearRect(30,30,50,50);
- }
二次贝塞尔曲线
XML/HTML Code复制内容到剪贴板
- var canvas = document.getElementById('canvas');
- if (canvas.getContext) {
- context.beginPath();
- context.moveTo(100,100);
- context.quadraticCurveTo(20,50,200,20);
- context.stroke();
- }
三次贝塞尔曲线
XML/HTML Code复制内容到剪贴板
- var canvas = document.getElementById('canvas');
- if (canvas.getContext) {
- context.moveTo(68,130);
- var cX1 = 20;
- var cY1 = 10;
- var cX2 = 268;
- var cY2 = 10;
- var endX = 268;
- var endY = 170;
- context.bezierCurveTo(cX1, cY1, cX2, cY2, endX, endY);
- context.stroke();
-
- // 利用clip指定绘图区域,指定绘图区域之后,只能在绘图区域中进行绘图擦欧总
- // 绘制圆形
- context.arc(100,100,40,0, 360 * Math.PI/ 180 , true);
- // 限制区域
- context.clip();
- // 开始尝试绘制其他
- context.beginPath();
- context.fillStyle = 'lightblue';
- // 结果矩形并没有显示出来
- context.fillRect(0,0,300,150);
- }
画板进阶使用
XML/HTML Code复制内容到剪贴板
- var canvas = document.getElementById('canvas');
- if (canvas.getContext) {
- var context = canvas.getContext('2d');
- /*
- * drawImage(image,dx,dy)
- * drawImage(image,dx,dy,dw,dh)
- * drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh);
- * image 绘图对象
- * dx dy canvas 的坐标
- * dw,dh 表示 image 在canvas中即将绘图的位置
- * sw,sh 表示image 所要绘图的区域
- * sx,sy 所要绘图的开始位置
- */
- var image = document.getElementById('img');
- context.drawImage(image, 0, 0);
- var img = new Image();
- img.src = 'images/1.jpg';
- img.onload = function(){
-
- // drawImage
- // 从 0,0 坐标开始绘制
- // context.drawImage(img,0,0);
- // 从0,0 开始,绘制整张图到100,100 长宽
- // context.drawImage(img, 0, 0, 100, 100);
- // 截图,50,50 到 100,100 从 260,130 开始绘制,放到 100,100 长宽区域中
- // context.drawImage(img, 50, 50, 100,100, 260, 130, 100, 100);
-
- // 利用getImageData 和 putImageData 绘制图片
-
- context.drawImage(img, 10, 10);
- // 从画板上获取像素数据
- // 开始位置, 结束位置
- var imgData = context.getImageData(50,50,100,100);
- // 将数据画到画板指定位置坐标
- context.putImageData(imgData,10,260);
- // 将所去的像素数据一部分,画到画板上
- context.putImageData(imgData,200,260,50,50,100,100);
-
- // createImageData 创建像素
- var imgData = context.getImageData(50,50,200,200);
- // 创建指定大小的空对象
- var imgData01 = context.createImageData(imgData);
-
- for (i = 0; i < imgData01.width * imgData01.height * 4; i+=4) {
- // 红色像素
- imgData01.data[i + 0] = 255;
- imgData01.data[i+1] = 0;
- imgData01.data[i+2] = 0;
- imgData01.data[i+3] = 255;
-
- }
- context.putImageData(imgData01, 10, 260);
- }
- }
推荐阅读
-
本文介绍了在VScode中设置格式化文档换行或不换行的方法,包括使用插件和修改settings.json文件的内容。详细步骤为:找到settings.json文件,将其中的代码替换为指定的代码。 ...
[详细]
蜡笔小新 2023-12-14 17:15:38
-
本文介绍了使用AJAX的POST请求实现数据修改功能的方法。通过ajax-post技术,可以实现在输入某个id后,通过ajax技术调用post.jsp修改具有该id记录的姓名的值。文章还提到了AJAX的概念和作用,以及使用async参数和open()方法的注意事项。同时强调了不推荐使用async=false的情况,并解释了JavaScript等待服务器响应的机制。 ...
[详细]
蜡笔小新 2023-12-14 16:12:01
-
-
本文介绍了使用kotlin实现动画效果的方法,包括上下移动、放大缩小、旋转等功能。通过代码示例演示了如何使用ObjectAnimator和AnimatorSet来实现动画效果,并提供了实现抖动效果的代码。同时还介绍了如何使用translationY和translationX来实现上下和左右移动的效果。最后还提供了一个anim_small.xml文件的代码示例,可以用来实现放大缩小的效果。 ...
[详细]
蜡笔小新 2023-12-14 17:29:08
-
本文介绍了Nginx的使用,重点讲解了server参数配置,包括端口号、主机名、根目录等内容。同时,还介绍了Nginx的反向代理功能。 ...
[详细]
蜡笔小新 2023-12-14 17:08:34
-
本文介绍了基于layUI的图片上传前预览功能的两种实现方式:一种是使用blob+FileReader,另一种是使用layUI自带的参数。通过选择文件后点击文件名,在页面中间弹窗内预览图片。其中,layUI自带的参数实现了图片预览功能。该功能依赖于layUI的上传模块,并使用了blob和FileReader来读取本地文件并获取图像的base64编码。点击文件名时会执行See()函数。摘要长度为169字。 ...
[详细]
蜡笔小新 2023-12-14 17:06:58
-
电销机器人作为一种人工智能技术载体,可以帮助企业提升电销效率并节省人工成本。然而,电销机器人市场缺乏统一的市场准入标准,产品品质良莠不齐。创业者在代理或购买电销机器人时应注意谨防用录音冒充真人语音通话以及宣传技术与实际效果不符的情况。选择电销机器人时需要考察公司资质和产品品质,尤其要关注语音识别率。 ...
[详细]
蜡笔小新 2023-12-14 16:31:48
-
这是原文链接:sendingformdata许多情况下,我们使用表单发送数据到服务器。服务器处理数据并返回响应给用户。这看起来很简单,但是 ...
[详细]
蜡笔小新 2023-12-14 16:19:10
-
本文介绍了如何去除Win7快捷方式的箭头的方法,通过生成一个透明的ico图标并将其命名为Empty.ico,将图标复制到windows目录下,并导入注册表,即可去除箭头。这样做可以改善默认快捷方式的外观,提升桌面整洁度。 ...
[详细]
蜡笔小新 2023-12-14 16:17:05
-
本文介绍了数据库的存储结构及其重要性,强调了关系数据库范例中将逻辑存储与物理存储分开的必要性。通过逻辑结构和物理结构的分离,可以实现对物理存储的重新组织和数据库的迁移,而应用程序不会察觉到任何更改。文章还展示了Oracle数据库的逻辑结构和物理结构,并介绍了表空间的概念和作用。 ...
[详细]
蜡笔小新 2023-12-14 16:00:02
-
本文介绍了Java实战之电影在线观看系统的实现过程。首先对项目进行了简述,然后展示了系统的效果图。接着介绍了系统的核心代码,包括后台用户管理控制器、电影管理控制器和前台电影控制器。最后对项目的环境配置和使用的技术进行了说明,包括JSP、Spring、SpringMVC、MyBatis、html、css、JavaScript、JQuery、Ajax、layui和maven等。 ...
[详细]
蜡笔小新 2023-12-14 15:52:03
-
本文介绍了使用Java实现大数乘法的分治算法,包括输入数据的处理、普通大数乘法的结果和Karatsuba大数乘法的结果。通过改变long类型可以适应不同范围的大数乘法计算。 ...
[详细]
蜡笔小新 2023-12-14 15:43:50
-
本文介绍了在Webpack5中处理图片资源的配置方法。在Webpack4中,我们需要使用file-loader和url-loader来处理图片资源,但是在Webpack5中,这两个Loader的功能已经被内置到Webpack中,我们只需要简单配置即可实现图片资源的处理。本文还介绍了一些常用的配置方法,如匹配不同类型的图片文件、设置输出路径等。通过本文的学习,读者可以快速掌握Webpack5处理图片资源的方法。 ...
[详细]
蜡笔小新 2023-12-14 15:39:51
-
本文是一位90后程序员分享的职业发展经验,从年薪3w到30w的薪资增长过程。文章回顾了自己的青春时光,包括与朋友一起玩DOTA的回忆,并附上了一段纪念DOTA青春的视频链接。作者还提到了一些与程序员相关的名词和团队,如Pis、蛛丝马迹、B神、LGD、EHOME等。通过分享自己的经验,作者希望能够给其他程序员提供一些职业发展的思路和启示。 ...
[详细]
蜡笔小新 2023-12-14 15:22:09
-
本文介绍了解决HDU 2372 El Dorado问题的一种动态规划方法,通过循环k的方式求解最长上升子序列的长度。具体实现过程包括初始化dp数组、读取数列、计算最长上升子序列长度等步骤。 ...
[详细]
蜡笔小新 2023-12-14 15:08:18
-
目录实现效果:实现环境实现方法一:基本思路主要代码JavaScript代码总结方法二主要代码总结方法三基本思路主要代码JavaScriptHTML总结实 ...
[详细]
蜡笔小新 2023-12-14 15:03:14
-
IP-COM东莞办事处_426
这个家伙很懒,什么也没留下!