canvas集选
关注
分享
扫一扫
如风似我
这个作者很懒，什么都没留下…
展开
-
canvas集合
收集与canvas相关的一些操作：1.HTML5实现图片的压缩和裁剪https://www.cnblogs.com/suntrain/p/6145827.html原创 2018-03-13 15:12:11 · 159 阅读 · 0 评论 -
canvas - 基础知识 - 虚线的绘制
主要的JS逻辑代码：// 虚线的绘制var context = document.getElementById('canvas').getContext('2d');function drawDashLine(context, x1, y1, x2, y2, dashLength) { dashLength = dashLength === undefined ? 5 : dash...原创 2019-05-13 16:38:59 · 544 阅读 · 0 评论 -
canvas - 基础知识 - 绘制剪纸图形
html代码：<!DOCTYPE html><html> <head> <title>Sprite sheet</title> <style> body { background: #ddd; } #canvas { positio...原创 2019-05-13 12:17:39 · 572 阅读 · 0 评论 -
canvas - 基础知识 - 绘制表格
var context = document.getElementById('canvas').getContext('2d');// functionsfunction drawGrid(color, stepx, stepy) { context.strokeStyle = color; context.lineWidth = 0.5; for(var i = step...原创 2019-05-13 12:14:45 · 965 阅读 · 0 评论 -
canvas - 绘图 - 图像绘制（一）完整绘制
在canvas中绘制图像：主要的JS代码逻辑是：var canvas = document.getElementById('canvas'),context = canvas.getContext('2d'),image = new Image();image.src = 'timg.jpeg';image.onload = function(e) {contex...原创 2019-05-24 19:30:50 · 1908 阅读 · 0 评论 -
canvas - 基础知识 - 橡皮筋式选取框或可用作放大缩小
html页面代码：<!DOCTYPE html><html> <head> <title>Rubber bands with layerd elements</title> <style> body { background: rgba(100, 145, 250, 0....原创 2019-05-10 16:27:44 · 927 阅读 · 0 评论 -
canvas - 基础知识 - 绘制三次贝塞尔曲线
公式：逻辑代码：var canvas = document.getElementById('canvas'), context = canvas.getContext('2d'), endPoints = [{x:130,y:70},{x:430,y:270}], controlPoints = [{x:130, y: 250}, {x:450, y:70}]...原创 2019-05-15 15:12:42 · 1232 阅读 · 0 评论 -
canvas - 基础知识 - 绘制二次方贝塞尔曲线
主要的逻辑代码：// 绘制二次方贝塞尔曲线var context = document.getElementById('canvas').getContext('2d'); context.fillStyle = 'cornflowerblue'; context.strokeStyle = 'yellow'; context.shadowColor = 'r...原创 2019-05-15 11:26:02 · 992 阅读 · 0 评论 -
canvas - 基础知识 - 精灵表坐标查看器的javascript代码
页面代码：<!DOCTYPE html><html> <head> <title>Sprite sheet</title> <style> body { background: #ddd; } #canvas { position:...原创 2019-05-10 10:51:28 · 302 阅读 · 0 评论 -
canvas - 基础知识 - 仪表盘的绘制
js逻辑代码：var canvas = document.getElementById('canvas'), context = canvas.getContext('2d'), CENTROID_RADIUS = 10, // 中心半径 CENTROID_STROKE_STYLE = 'rgba(0, 0, 0, 0.5)', CENTROID_FILL_...原创 2019-05-14 16:04:50 · 917 阅读 · 0 评论 -
canvas - 基础知识 - 事件处理
1.1 鼠标事件：“按下鼠标事件”：canvas.onmousedown = function(e) {// react to the mouse down event}此外还可以用 addEventListener()方法来注册监听器canvas.addEventListener('mousedown', function(e) {// react to the mo...原创 2019-05-09 10:51:12 · 999 阅读 · 0 评论 -
canvas - 基础知识 - 绘制时钟程序
在时钟的绘制中，主要用到canvas绘图API：arc()beginPath()clearRect()fill()fillText()lineTo()moveTo()stroke()效果图如下：页面代码如下：<!DOCTYPE html><html><head><title>A Simple...原创 2019-05-08 17:11:39 · 262 阅读 · 0 评论 -
canvas - 基础知识 - hello canvas
example.html的代码如下：example.js的代码如下：最后在浏览器中运行的效果如下：知识点：（1）使用document.getElementById()方法来获取指向canvas的引用；（2）在canvas对象上调用getContext('2d')方法，获取绘图环境变量； (3) 使用绘图环境对象在canvas元素上进行绘制。警告：在设置can...原创 2019-05-08 15:46:08 · 211 阅读 · 0 评论 -
H5在移动端实现图片裁剪缩放功能
最近在做一个固定比例的框，去放大缩小图片，让用户去裁切图片的过程。2018-03-29 目前的状态是画出了模型，并且可以在ios上实现放大缩小，使用gesturechange手势事件，但是安卓机不兼容，所以在找合适的解决方案中。2018-03-30 尝试了寻找办法，就从最基础的事件找起，touch事件，于是乎，我就打印出关于touch事件的属性，经过试验，还有网上的资料，touch有一个touch...原创 2018-03-29 15:25:37 · 11025 阅读 · 0 评论 -
canvas - 绘图 - 图像绘制(缩放demo)
html代码：<!DOCTYPE html><html> <head> <title>Scaling image</title> <style> body { background: rgba(100, 145, 250, 0.3); } ...原创 2019-05-27 12:03:54 · 1183 阅读 · 0 评论