分类：Canvas

2020
10-08

原生js+canvas实现下雪效果

原生js+canvas实现下雪效果 本文实例为大家分享了js+canvas实现下雪效果的具体代码，供大家参考，具体内容如下效果展示：源码展示:<!doctypehtml><html><head><metacharset="utf-8"><title>canvas下雪效果(原生js)</title><style>*{margin:0;padding:0}html,body{width:100%;height:100%;overflow:hidden;background-color:#222;}#canvas{position:absolute;top:0;left:0;}</style></head><body><canvasid="ca... 继续阅读 >
2020
10-08

javascript利用canvas实现鼠标拖拽功能

javascript利用canvas实现鼠标拖拽功能 利用canvas实现鼠标拖拽功能，当在元素上按下鼠标并移动时，元素跟着鼠标移动。效果：主要思路：当鼠标按下时，用isPointInPath方法判断鼠标位置是否在元素上，如果在则鼠标移动时元素跟着移动；当鼠标抬起时，将鼠标移动事件和抬起事件置空。代码如下：<canvasid="can"width="400"height="400"></canvas><scripttype="text/javascript">varcan=document.getElementById("can");varctx=can.getContext("2d");//创建... 继续阅读 >
2020
10-08

基于javascript canvas实现五子棋游戏

本文实例为大家分享了基于canvas的五子棋的具体代码，供大家参考，具体内容如下第一部分：核心类Gobang属性：this.box=box;//存放五子棋的容器this.canvas=null;//画布this.ctx=null;this.size=600;//棋盘大小this.cellNum=20;//单行棋格数量this.padding=this.size/this.cellNum;//padding值this.cellSize=(this.size-this.padding*2)/this.cellNum;//棋格大小this.pieceSize=this.cellSize*3/4;//... 继续阅读 >
2020
10-08

javascript+Canvas实现画板功能

本文实例为大家分享了Canvas实现画板功能的具体代码，供大家参考，具体内容如下CSS样式代码body,html{text-align:center;padding-top:20px;/*margin:0;*/}canvas{box-shadow:0010px#333;margin:0auto;/*position:absolute;left:0;border:1pxsolidred;*/}这是主体代码<bodyonload="draw()"><canvasid="canvas"width="800"height="600"></canvas><script>functiondraw(){varcanvas=documen... 继续阅读 >
2020
10-05

JS+canvas五子棋人机对战实现步骤详解

1.创建实例functionGobang(){this.over=false;//是否结束this.player=true;//true:我false:电脑this.allChesses=[];//所有棋子this.existChesses=[]//已经落下的棋子this.winsCount=0;//赢法总数this.wins=[];//所有赢法统计this.myWins=[];//我的赢法统计this.computerWins=[];//电脑赢法统计}2.初始化//初始化Gobang.prototype.init=function(opts){//生成canvas棋盘... 继续阅读 >
2020
09-29

vue+canvas实现移动端手写签名

vue+canvas实现移动端手写签名 本文实例为大家分享了vue+canvas实现移动端手写签名的具体代码，供大家参考，具体内容如下<template><divclass="sign"><divclass="header"><iclass="el-icon-arrow-leftbackImg"@click="goBack"></i><spanclass="title">个人签名</span></div><sectionclass="signature"><divclass="signatureBox"><divclass="canvasBox"ref="canvasHW"><canvasref="canvasF"class="canvasStyle"@to... 继续阅读 >
2020
09-29

基于canvas实现手写签名（vue）

基于canvas实现手写签名（vue） 最近一直在研究canvas的东西，正好之前对手写签名这块有点兴趣。就自己基于vue写了一个简易的手写签名demo。其中原理比较简单，先生成一个canvas画布，并对canvas进行touchstart和touchmove事件进行监听。当监听touchstart事件被触发时，我们开始触发canvas里的beginPath事件并且设置moveTo原始点。当监听touchmove事件则去不断去触发lineTo事件，最后stroke()。demo里还有清除签名和保存签名的功能，分别对应了clearRect()和toDat... 继续阅读 >
2020
09-27

vue下canvas裁剪图片实例讲解

由于时间关系代码没有做整理大家有什么不懂得可以留言；代码的主题思路备注中都有大家可以看看我的博客中还有关于canvas绘制矩形的文章有需要的可以看一下；HTML代码：第一行的canvas为裁剪后展示用；div中的canvas存放原有尺寸的图片<canvasid="canvasImg1"style="position:absolute;margin:2px000"></canvas><divid="dymImgCanv1"style="display:none;"><canvasid="dymCurrImg1":src="leftImg.carImgUrl"width=... 继续阅读 >
2020
09-24

JavaScript canvas基于数组生成柱状图代码实例

JavaScript canvas基于数组生成柱状图代码实例 HTML5的canvas元素使用JavaScript在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。canvas元素本身是没有绘图能力的。所有的绘制工作必须在JavaScript内部完成：canvas柱状图vararr=[{id:1001,price:100},{id:1002,price:150},{id:1003,price:200},{id:1004,price:70},{id:1005,price:300}];vargap... 继续阅读 >
2018
12-03

离屏Canvas — 使用Web Worker提高你的Canvas运行速度

离屏Canvas — 使用Web Worker提高你的Canvas运行速度 原文链接：developers.google.com现在因为有了离屏Canvas，你可以不用在你的主线程中绘制图像了！Canvas是一个非常受欢迎的表现方式，同时也是WebGL的入口。它能绘制图形，图片，展示动画，甚至是处理视频内容。它经常被用来在富媒体web应用中创建炫酷的用户界面或者是制作在线（web）游戏。它是非常灵活的，这意味着绘制在Canvas的内容可以被编程。举个... 继续阅读 >
2014
12-03

推荐18个基于HTML5 Canvas 开发的图表库

推荐18个基于HTML5 Canvas 开发的图表库 如今，HTML5可谓如众星捧月一般，受到许多业内巨头的青睐。很多Web开发者也尝试着用HTML5来制作各种各样的富Web应用。HTML5规范引进了很多新特性，其中最令人期待的之一就是Canvas元素。HTML5Canvas提供了通过JavaScript绘制图形的方法，非常强大。今天，本文收集了一些非常好的基于HTML5Canvas的图表方案推荐给大家。1. VisualizeVisualize通过Javascript从结构化的HTML表格获取数据并借... 继续阅读 >