分类：Canvas

2020
10-18

JS页面动态绘图工具SVG，Canvas，VML介简介

说到绘图、报表之类的技术，大家首先想到的就是Flex，当然也有许多了解javaapplet，对于这两种技术来说，各有利弊。首先Flex很笨重，但是其效果实在让人喜欢。对于javaapplet来说，至少我在网络上很少看到，当然对于我们做开发的来说在我们的开发工具或者内部网络上还是有一些的。其实现在Web上进行绘图的话还是有很多选择的，你可以到谷歌上搜索JS绘图，会有很多绘图工具提供给你使用，而且功能非常强大。比如说maxGraph，你可以... 继续阅读 >
2020
10-11

js canvas实现俄罗斯方块

本文实例为大家分享了canvas实现俄罗斯方块的具体代码，供大家参考，具体内容如下<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</title></head><bodystyle="margin:0;"><canvasid="tetris"style="border:1pxsolid#000;"></canvas><divid="text"style='color:red;font-size:30px;'>当前分数：0</div></body... 继续阅读 >
2020
10-11

利用js canvas实现五子棋游戏

本文实例为大家分享了canvas实现五子棋游戏的具体代码，供大家参考，具体内容如下html部分<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</title></head><bodystyle="margin:0;"><canvasstyle="margin-left:20px;"id="five"></canvas><h1style="font-size:40px;font-weight:bolder;margin-left:200px;ma... 继续阅读 >
2020
10-11

js+h5 canvas实现图片验证码

js+h5 canvas实现图片验证码 本文实例为大家分享了js+h5canvas实现图片验证码的具体代码，供大家参考，具体内容如下实现效果一、使用技术原生js技术+html5canvas画图利用Math.random()函数随机生成颜色字符串 及障碍物点击验证码可变更验证码图案二、使用步骤1.html+css代码如下（示例）：<divclass="login_code_box"><divclass="login_code"><inputtype="text"name="login_code"id="login_code"placeholder="请输入验证码"... 继续阅读 >
2020
10-10

js通过canvas生成图片缩略图

现今大部分的网络应用在上传图片的时候都会同时保存几种尺寸的图片，专业术语也就是生成缩略图，而对于生成缩略图一般做法是通过后端语言php等来生成，但是为了给服务器减压，我们或许可以从前端来着手，先生成好不同尺寸的缩略图，传给后端，而后端只需要将前端传过来的图片进行存储就好了。使用Canvas我们可以轻松生成各种尺寸的图片，具体实现如下：functionresizeImage(src,callback,w,h){varcanvas=document.createEleme... 继续阅读 >
2020
10-10

javascript canvas封装动态时钟

本文实例为大家分享了canvas封装动态时钟的具体代码，供大家参考，具体内容如下<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>canvas绘制动态时钟</title><style>#clock{display:block;margin:30pxauto;}</style></head><body><canvasid="clock"width="200"height="200"></canvas><script>functioncanvasCloc... 继续阅读 >
2020
10-10

vue使用canvas实现移动端手写签名

vue使用canvas实现移动端手写签名 基于vue使用canvas实现移动端手写签名！之前自己开发有这么一个需求，需要实现手写签名，然后以图片的形式保存生成图片的base64数据流。自己在网上找了一堆，都不是很完美。然后参考网上的加自己的优化和修改做了一版。希望有需要的朋友可以拿来直接用。HTML部分：<template><divclass="hello"><div>请输入您的签名7：</div><canvasid="canvas"ref="canvasW"width="373"height="200"style="border:1pxsolidblack"... 继续阅读 >
2020
10-10

vue+canvas实现拼图小游戏

vue+canvas实现拼图小游戏 利用vue+canvas实现拼图小游戏，供大家参考，具体内容如下思路步骤一个拼图拼盘和一个原图参照对原图的切割以及随机排序通过W/A/D/S或上下左右进行移动难度的自主选择对拼图是否完成的判定JS实现部分数据分析row：拼图的总行数；column：拼图的总列数。(用来设置拼图难度，也是每个拼图块宽高的设置规则)pic[{x,y,row,column,index}]：小拼图的集合，其内元素为小拼图的数据结构。(x、y：拼图块在canvas的绘制... 继续阅读 >
2020
10-10

js+canvas实现转盘效果（两个版本）

本文实例为大家分享了js+canvas实现转盘效果的具体代码，供大家参考，具体内容如下用到了canvas的绘制，旋转，重绘操作，定时器，文本，平移，线条，圆，清理画布等等；版本一不可以点击，刷新旋转<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>转盘抽奖</title><styletype="text/css">#myCanvas{background:#FAEBD7;}</style></head><body><canvasid="myCanvas"width="500"height="500"></canvas... 继续阅读 >
2020
10-10

js+canvas实现画板功能

本文实例为大家分享了js+canvas实现画板功能的具体代码，供大家参考，具体内容如下1.实现了画图，改变画笔粗细，改变画笔颜色，清屏功能<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title>画板</title><linkrel="shortcuticon"type="image/x-icon"href="img/an.ico"/><linkrel="stylesheet"type="text/css"href="css/drow.css"/></head><body><canvasid="mycanvas"width="1100px"height="660px"></c... 继续阅读 >
2020
10-10

js+canvas实现刮刮奖功能

本文实例为大家分享了js+canvas实现刮刮奖的具体代码，供大家参考，具体内容如下1.实现了PC端的刮刮奖效果2.使用了canvas的文本，像素操作，合成，绘制图形，随机数<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>刮刮奖</title><styletype="text/css">*{margin:0;padding:0;}.box{width:500px;height:500px;margin:0auto;position:relative;background:#00BFFF;}#prize{width:300px;... 继续阅读 >
2020
10-10

使用js和canvas实现时钟效果

使用js和canvas实现时钟效果 使用js和canvas写一个时钟，供大家参考，具体内容如下<!DOCTYPEhtml>`<htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</title></head><body><canvasid='canvas'width='600'height='600'style="border:1pxsolidred;"></canvas><script>/**@type{HTMLCanvasElement}*/letcanvas=document.querySelector("#can... 继续阅读 >
2020
10-10

javascript使用canvas实现饼状图效果

javascript使用canvas实现饼状图效果 使用canvas写一个饼状图，供大家参考，具体内容如下代码：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</title></head><body><canvasid='canvas'width='800'height='400'style="border:1pxsolidred;"></canvas><script>letdata=[{title:"服饰1",money:400},{title:"服饰2",money:300},... 继续阅读 >
2020
10-10

javascript canvas实现简易时钟例子

本文实例为大家分享了javascriptcanvas实现简易时钟的具体代码，供大家参考，具体内容如下<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>钟表</title><scripttype="text/javascript">window.onload=function(){//1.获取画布varcanvas=document.getElementById("canvas");//2.获取上下文对象（获取画笔）... 继续阅读 >
2020
10-08

原生js+canvas实现贪吃蛇效果

原生js+canvas实现贪吃蛇效果 本文实例为大家分享了canvas实现贪吃蛇效果的具体代码，供大家参考，具体内容如下效果展示：源码展示：页面布局展示：worm.html<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>贪吃蛇</title><styletype="text/css">canvas{border:1pxsolidblack;}div{width:50px;height:50px;border:1pxsolidblack;cursor:pointer;text-align:center;line-height:50px;}</style><scripttype="text/java... 继续阅读 >
2020
10-08

原生js canvas实现鼠标跟随效果

原生js canvas实现鼠标跟随效果 本文实例为大家分享了canvas实现鼠标跟随效果的具体代码，供大家参考，具体内容如下效果展示：源码展示：<!doctypehtml><html><head><metacharset="utf-8"><title>canvas鼠标跟随效果（原生js实现）</title><scriptsrc="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script><style>*{margin:0;padding:0;}body{overflow:hidden;}#myCanvas{background-color:... 继续阅读 >