canvas
boonyaxnn
好好学习,天天向上
展开
-
H5 canvas的globalAlpha属性
定义:globalAlpha 属性值必须是结余0.0(完全透明)与1.0(不透明)之间的数字JS语法:context.globalAlpha =number例如:var radious = 0; var draw = function () { context.clearRect(0, 0, 200, 200) context.globalAlpha = (context.globalAlpha - 0.01 + 1) % 1; radi原创 2020-07-20 11:22:13 · 510 阅读 · 0 评论 -
Canvas 面向对象创建多个小球水平向右运动
1、首先创建页面上下文关联 var canvas=document.getElementById('canvas'); var ctx=canvas.getContext('2d');2、面向对象,JavaScript不区分类和实例的概念,而是通过原型(prototype)来实现面向对象编程; 具体详情查看https://www.liaoxuefeng.com/wik...原创 2019-05-19 00:28:14 · 551 阅读 · 0 评论 -
Canvas 创建一个小球,并且可以在画布里来回移动
1、获取页面元素,并关联上下文; var canvas=document.getElementById('canvas'); var ctx=canvas.getContext('2d');2、 当小球到底画布的最右侧,则清空画布;(x >=canvas.width+20),+20是小球完全走出页面;-20就是小球在画布的最右侧 var x=100; ...原创 2019-05-16 19:32:29 · 1016 阅读 · 0 评论 -
Canvas 刮刮乐
1、先在页面里创建一个canvas;<canvas id='canvas' width="500" height="300"></canvas>2、css样式 #canvas{ border: 1px solid gray; display: block; margin: ...原创 2019-05-16 19:08:10 · 548 阅读 · 0 评论 -
Canvas 实现多个大小不等的小球运动
效果图:完整代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta...原创 2019-05-16 20:44:48 · 515 阅读 · 0 评论 -
Canvas 插入视频
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...原创 2019-05-27 20:28:02 · 1395 阅读 · 0 评论 -
Cropper 图片裁剪并上传
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Page Title</title> <link...原创 2019-07-02 07:54:51 · 255 阅读 · 0 评论