精华内容
下载资源
问答
  • 多层画布canvas
    2021-07-21 03:04:20

    HTML5画布——canvas

    HTML5元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成.

    标签只是图形容器,您必须使用脚本来绘制图形。

    你可以通过多种方法使用Canva绘制路径,盒、圆、字符以及添加图像

    1、如何创建一个画布?

    content

    content中的内容是当浏览器不支持canvas标签时显示的内容

    content

    定义一个有边框的画布,border属性是边框的宽度和边框的颜色

    2、用JavaScript在画布上绘制图像:

    首先找到元素:

    var c=document.getElementById("myCanvas");

    再创建一个context对象:

    var ctx = c.getContext("2d")

    getContext("2d") 对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法

    开始绘制图像(例如绘制填充一个矩形):

    ctx.fillStyle = #66ccff;

    ctx.fillRect(x,y,width,height)

    canvas画布是一个二维网格。

    canvas画布的左上角坐标为 (0,0)

    矩形的x,y分别表示矩形左上角的坐标,width和height参数表示矩形的宽度和高度

    3、canvas路径的绘制:

    (1)直线路径的绘制:

    同绘制矩形图形一样,首先找到canvas元素后创建一个context对象

    接着线条的开始坐标:

    moveTo(x,y)

    再定义线条的结束坐标:

    lineTo(x,y)

    最后stroke() 方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径

    ctx.stroke()

    strokeStyle属性可以设定路径的颜色:

    ctx.strokeStyle = "red"

    (2)绘制圆形:

    绘制圆形,我们使用如下的方法:

    arc(x,y,r,start,stop)

    例如,下边绘制一个圆形:

    var c=document.getElementById("myCanvas");

    var ctx=c.getContext("2d");

    ctx.beginPath();

    ctx.arc(95,50,40,0,2*Math.PI);

    ctx.stroke();

    x,y分别表示x和y轴上的坐标

    r:半径长度

    start:起始角度,圆心平行的右端为0度

    stop:结束角度:Math.PI表示180°,画圆的方向是顺时针

    (3)绘制文本:

    font属性定义绘制文本的字体,例如设置consolas的30像素字体:

    ctx.font = "30px consolas"

    绘制实心文本:

    fillText(content,x,y)

    绘制空心的文本:

    strokeText(content,x,y)

    4、canvas的渐变效果:

    (1)创建一个渐变:

    创建线条渐变: x,y表示渐变开始点的x,y坐标,x1,x2点表示结束点x,y坐标

    createLinearGradient(x,y,x1,y1)

    创建一个径向/圆渐变

    creatRadialGradient(x,y,r,x1,y1,r1)

    (2)使用渐变对象:

    使用渐变对象,必须使用两种或两种以上的颜色停止颜色

    addColorStop()方法指定颜色停止,参数为0~1

    (3)最后开始绘制形状路径(填充渐变)

    设置fillStyle或strokeStyle的值为渐变,然后绘制图像:

    ctx.fillStyle=grd grd为createLinearGradient创建的对象

    ctx.fillRect(x,y,w,h)

    更多相关内容
  • )评论代码见:http://www.open-open.com/code/view/1454844796714本代码演示::http://runjs.cn/detail/1pd7zcit1.[代码]使用 html5 canvas 多层画布的优点Moving Canvasvar k6=0; //产生动画背景效果、使每次调用m6()...

    开发多层动画画布的效果 (原创,根据对刘志军代码的评论代码修改。)

    评论代码见: http://www.open-open.com/code/view/1454844796714

    本代码演示:: http://runjs.cn/detail/1pd7zcit

    1.[代码]使用 html5 canvas 多层画布的优点

    Moving Canvas

    var k6=0; //产生动画背景效果、使每次调用m6()时,color6 数组下标更

    //用于同心环颜色渐变的数组数据新

    var color6= new Array("#0F0","#0F2","#0F4","#0F6", "#0F8","#0FA","#0FC","#0FE","#0FF","#0FE","#0FC","#0FA","#0F8","#0F6","#0F4","#0F2");

    function m6(){

    var h = document.getElementById("myCanvas6");

    var ctx6 = h.getContext("2d");

    var grd2 = ctx6.createRadialGradient(80,80,15,80,80,220);

    for (var i=0;i<=10;i++)

    grd2.addColorStop(i/10,color6[(i+k6++)%color6.length]);

    ctx6.fillStyle=grd2;

    ctx6.fillRect(0,0,320,500);

    }

    //用于同心环颜色渐变的数组数

    var color5=new Array("red","#FF6100","#FFFF00","green","blue","#082E54","#A020F0");

    var k=0;//产生动画背景效果、使每次调用m5()时,color5 数组下标更

    function m5(){

    var g=document.getElementById("myCanvas5");

    var ctx5 = g.getContext("2d");

    var grad = ctx5.createLinearGradient(0,0,500,0);

    for (var i=0;i<=10;i++)

    grad.addColorStop(i/10,color5[(i+k++)%color5.length]);

    ctx5.fillStyle=grad;

    ctx5.font="35Px KAITI";

    ctx5.fillText("你好,开源中国", 10,100);

    }

    var m4_alpha=0; //产生坐标轴旋转的递增变量

    function m4(){

    var f = document.getElementById("myCanvas4");

    var ctx4 = f.getContext("2d");

    ctx4.clearRect(0,0,f.width,f.height);

    ctx4.save();

    ctx4.translate(130,150);

    ctx4.rotate(Math.PI/180*m4_alpha++);

    ctx4.font="35px KAITI";

    ctx4.strokeText("开源中国",0,0);

    ctx4.restore();

    }

    var font_size=20; //产生文字大小变化的变量

    var m3_larger=true; //此变量为真,文字变大,为徦,文字变小

    function m3(){

    var e = document.getElementById("myCanvas3")

    var ctx3= e.getContext("2d");

    ctx3.clearRect(0,0,e.width,e.height);

    ctx3.font=font_size+"px Arial";

    if (m3_larger) font_size++; else font_size--;

    if(font_size==30) m3_larger=false;

    if (font_size==20) m3_larger=true;

    ctx3.fillStyle="orange";

    ctx3.fillText("Hello, Open Source",5,30);

    }

    var m2_x0=0; //造成园的横坐标变化

    var m2_eastward=true; //变量为真,横坐标变大,园往西走

    function m2(){

    var d = document.getElementById("myCanvas2");

    var ctx2 = d.getContext("2d");

    ctx2.clearRect(0,0,d.width,d.height);

    ctx2.beginPath();

    ctx2.arc(95 + m2_x0, 50, 40,0,2*Math.PI);

    //ctx2.fillStyle="green";

    var grd2 = ctx2.createRadialGradient(95 + m2_x0,50,5,

    95 + m2_x0, 50, 40);

    grd2.addColorStop(0,"white");

    grd2.addColorStop(1,"green");

    ctx2.fillStyle=grd2;

    ctx2.fill();

    ctx2.stroke();

    if (m2_eastward) m2_x0++; else m2_x0--;

    if (m2_x0==100) m2_eastward=false;

    if (m2_x0==0) m2_eastward=true;

    }

    var m1_x=0; //造成直线和红长方形末端变化的 x 坐标

    var m1_y=0; //造成直线和红长方形末端变化的 y 坐标

    var m1_increase=true; //控制直线和红方块末端变化的布尔变量

    function m1(){

    var c = document.getElementById("myCanvas");

    var ctx = c.getContext("2d");

    ctx.clearRect(0,0,c.width,c.height);

    ctx.fillStyle="#FF0000";

    ctx.fillRect(0,0, m1_x+35,m1_y+25);

    ctx.beginPath(); //必须的

    ctx.moveTo(0,0);

    ctx.lineTo(m1_x+35,m1_y+25);

    ctx.stroke();

    if (m1_increase) {m1_x++; m1_y++;}

    else { m1_x--; m1_y--;};

    if (m1_x==45) m1_increase=false;

    if (m1_y==0) m1_increase=true;

    }

    function ani(){

    //设置各个画布更新的频度

    setInterval('m1()',200);

    setInterval('m2()',300);

    setInterval('m3()',400);

    setInterval('m4()',500);

    setInterval('m5()',600);

    setInterval('m6()',700);

    }

    #myCanvas{

    z-index:1;

    position:absolute;left:0;top:0;

    }

    #myCanvas2{

    z-index:2;

    position:absolute;left:80px;top:0;

    }

    #myCanvas3{

    z-index:3;

    position:absolute;left:0;top:90px;

    }

    #myCanvas4{

    z-index:4;

    position:absolute;left:0;top:100px;

    }

    #myCanvas5{

    z-index:5;

    position:absolute;left:0;top:300px;

    }

    #myCanvas6{

    position:absolute;

    left:0px;

    top:0px;

    z-index:0;

    }

    2.[图片] 无标题.png

    19175503_DGf1.png

    展开全文
  • Canvas画布

    2018-01-15 10:33:49
    可以通过多种方法使用canvas绘制路线,盒,圆、字符以及添加图像 (1)使用JavaScript来绘制图像 您的浏览器不支持HTML5 canvas标签 //创建context对象,getContext("2d")对象是内建的HTML5...

    概念:<canvas>元素用于图形的绘制,通过脚本(通常是JavaScript),<canvas>标签只是图形容器,必须使用脚本来绘制图形

    可以通过多种方法使用canvas绘制路线,盒,圆、字符以及添加图像

    (1)使用JavaScript来绘制图像

    	<body>
    		<canvas id="myCanvas" width="200" height="100" style="border: 1px solid #3C3C3C;">
    			您的浏览器不支持HTML5 canvas标签
    		</canvas>
    		
    		<script>
    			//创建context对象,getContext("2d")对象是内建的HTML5对象,拥有多种绘制路径,矩形,圆形,字符以及添加图像的方法
    			var c = document.getElementById("myCanvas");
    			var ctx = c.getContext("2d");
    			//设置fillStyle属性可以是css颜色,渐变,或者图案。fillStyle默认设置是#000000(黑色)
    			ctx.fillStyle = "#FF0000";
    			//fillRect(x,y,width,height)定义了矩形当前的填充方式
    			ctx.fillRect(0,0,150,75);
    		</script>
    	</body>
    (2)Canvas坐标

    canvas是一个二维网格

    canvas的左上角坐标为(0,0)

    (3)路径

    包含两种方法:

    moveTo(x,y)定义线条开始坐标

    lineTo(x,y)定义线条结束坐标

    例子:

            <body>
    		<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
    			您的浏览器不支持HTML5 canvas标签
    		</canvas>
    		
    		<script>
    			var c = document.getElementById("myCanvas");
    			var ctx = c.getContext("2d")
    			ctx.moveTo(0,0);
    			ctx.lineTo(200,100);
    			//stroke()方法绘制线条
    			ctx.stroke();		
    		</script>
    	</body>
    (4)文本

    使用canvas绘制文本,重要的属性和方法如下:

    font---定义字体

    fillText(text,x,y)---在canvas上绘制实心的文本

    strokeText(text,x,y)---在canvas上绘制空心的文本

    (5)渐变

    渐变可以填充在矩形,圆形,线条,文本等等,各种形状可以定义不同的颜色

    包含两种方式来设置canvas渐变

    • createLinearGradient(x,y,x1,y1) - 创建线条渐变
    • createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变

    当我们使用渐变对象,必须使用两种或两种以上的停止颜色。

    addColorStop()方法指定颜色停止,参数使用坐标来描述,可以是0至1.

    使用渐变,设置fillStyle或strokeStyle的值为 渐变,然后绘制形状,如矩形,文本,或一条线。

    使用 createLinearGradient():


    (6)图像

    方法:

    drawImage(image,x,y)






    展开全文
  • this.ctx = { back: this.canvas.back.getContext('2d'), mid: this.canvas.mid.getContext('2d'), front: this.canvas.front.getContext('2d') }; } resize() { for (var c in this.canvas) { this.canvas[c]....

    JavaScript

    语言:

    JaveScriptBabelCoffeeScript

    确定

    /* jshint esversion: 6 */

    ((main) => {

    this.requestAnimationFrame = (() => {

    return window.requestAnimationFrame ||

    window.webkitRequestAnimationFrame ||

    window.mozRequestAnimationFrame ||

    window.oRequestAnimationFrame ||

    window.msRequestAnimationFrame ||

    function(callback) {

    window.setTimeout(callback, 1000 / 60);

    };

    })();

    main(this, document, Vector2);

    })((window, document, v2, undefined) => {

    'use strict';

    const PI = Math.PI,

    TAU = PI * 2;

    const APP_DEFAULTS = {

    particleCount: 600,

    particleColor: 'rgba(200,200,230,0.5)'

    };

    class Particle {

    constructor(size, speed, context, bounds) {

    this.size = size;

    this.ctx = context;

    this.bounds = bounds;

    this.position = new v2();

    this.position.randomize(bounds);

    this.velocity = new v2(0, speed);

    this.velocity.y -= Math.random();

    }

    reset() {

    this.position.y = this.bounds.y + this.size;

    this.position.x = Math.random() * this.bounds.x;

    }

    update() {

    this.position.add(this.velocity);

    if (this.position.y < -this.size) {

    this.reset();

    }

    }

    }

    class App {

    constructor() {

    this.setup();

    this.getCanvas();

    this.resize();

    this.populate();

    this.render();

    }

    setup() {

    let self = this;

    self.props = Object.assign({}, APP_DEFAULTS);

    self.dimensions = new v2();

    window.onresize = () => {

    self.resize();

    };

    }

    getCanvas() {

    this.canvas = {

    back: document.querySelector('.back'),

    mid: document.querySelector('.mid'),

    front: document.querySelector('.front')

    };

    this.ctx = {

    back: this.canvas.back.getContext('2d'),

    mid: this.canvas.mid.getContext('2d'),

    front: this.canvas.front.getContext('2d')

    };

    }

    resize() {

    for (var c in this.canvas) {

    this.canvas[c].width = this.dimensions.x = window.innerWidth;

    this.canvas[c].height = this.dimensions.y = window.innerHeight;

    }

    }

    populate() {

    this.particles = [];

    for (let i = 0; i < this.props.particleCount; i++) {

    let pCtx = i < 300 ? this.ctx.back : i < 500 ? this.ctx.mid : this.ctx.front,

    size = i < 300 ? 5 : i < 500 ? 8 : 12,

    speed = i < 300 ? -0.5 : i < 500 ? -1 : -2,

    particle = new Particle(size, speed, pCtx, this.dimensions);

    this.particles.push(particle);

    }

    }

    render() {

    let self = this;

    self.draw();

    window.requestAnimationFrame(self.render.bind(self));

    }

    draw() {

    for (var c in this.ctx) {

    this.ctx[c].clearRect(0, 0, this.dimensions.x, this.dimensions.y);

    }

    for (let i = 0, len = this.particles.length; i < len; i++) {

    let p = this.particles[i];

    p.update();

    p.ctx.beginPath();

    p.ctx.fillStyle = this.props.particleColor;

    p.ctx.arc(p.position.x, p.position.y, p.size, 0, TAU);

    p.ctx.fill();

    p.ctx.closePath();

    }

    }

    }

    window.onload = () => {

    let app = new App();

    };

    });

    展开全文
  • }#background {width: 1600px;height: 768px;margin: 0 auto;background: url(../Images/bg2.jpg) no-repeat;position: relative;}#canvas {width: 1024px;height: 768px;margin: 0 au...
  • 文章目录Canvas画布)translate (平移)rotate(旋转)scale(缩放)skew(斜切)clip(裁剪)Canvas 状态的保存与恢复Canvas画布 Canvas画布画布:在Ps中,画布就是你的操作空间,画布之上有图层 图层:...
  • canvas画布绑定事件

    2021-05-16 23:15:53
    求个canvas画布大佬,问一下绑定事件的问题,就是在矩形的指定范围内,鼠标经过是改变这个改变这个矩形的颜色,离开再换回之前的颜色</p>
  • 多层canvas 遮挡事件响应的问题

    千次阅读 2019-06-28 16:23:25
    这个问题只要明白一点,canvas是可以多个的,canvas父级下面可以再有canvas下面还可以加的,如果因为多层canvas挡住了你的事件,你可以把那个整个图 拆成多个canvas来实现, 其中意思就像是你一个image就可以把效果...
  • 如果在画布2d上下文连续绘制多次相同的图形,比如 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;...
  • 自定义的布局中,在一个Canvas里绘画了很多图片。现在想使得画布里的 每个图片都进行旋转。我使用了下面的代码 ``` public static void drawPic(Canvas canvas) { mRotation += 10; if (mRotation > 360) { ...
  • 使用canvas画图表,层级太高超过弹层 方法一:用wx.canvasToTempFilePath将canvas转成图片 <html>: <canvas style="width:100%" canvas-id="lineCanvas" disable-scroll="true" class="canvas" wx:if...
  • 首先来看看canvas效果图 上面是我在canvas上绘制了多个不规则多边形,如果不是很了解怎么绘制,可以看我上个博客canvas画图 盒子结构 <div class="imgBox" ref="canvas"> <canvas id="myCanvas" width=...
  • 今天写到一个多层点击事件的监听。觉得还是挺好玩的。于是把它从模块中抽化出来了。... canvas {position: absolute;}function getRect(obj) {var x1 = obj.offsetLeft;var y1 = obj.offsetTop;var x2...
  • } @Override protected void onDraw(Canvas canvas) { int width = canvas.getWidth(); int height = canvas.getHeight(); int arcCenterX = width - 10; int arcCenterY = height - 10; final RectF arcBounds = ...
  • 画布实现一个网页画图工具,画完了图之后:绘制方法:let board = document.getElementById('drawingBoard');let ctx = board.getContext('2d');let lastX, lastY;const t = this;board.onmousedown = function ...
  • 画布绘制 In this example, we will create a small paint application using theCanvaselement. 在本例中,我们将使用Canvas元素类型创建一个小的绘画应用程序。 For this, we arrange four color squares on ...
  • } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); canvas.drawBitmap( mBitmap, 0, 0, mBitmapPaint); canvas.drawPath( mPath, mPaint); canvas.drawPath( circlePath, ...
  • canvas 多层弹框

    2018-06-08 09:04:36
    思路是创建两个画布,隐藏弹出的画布,在基础画布点击元素时,创建一个矩形或圆形,判断点击位置是否在区域内,实现点击判断,初始化弹出层并控制弹出层显示/隐藏1:创建两个canvas画布HTML&lt;canvas id="...
  • canvas 图形画布标签】(使用详解)

    千次阅读 2019-05-23 23:22:06
    canvas 图形画布标签1. 如何定义一个 图形画布 ?1.1 canvas 图形画布 标签的属性 有哪些 ?1.2 canvas 图形画布的 基本用法 有哪些 ?1.3 如何使用 canvas 图形画布 标签 来绘制图形 ?1.3.1 画布栅格和坐标空间1.3.2 ...
  • 前端性能优化:Canvas

    2022-05-14 15:23:27
    Canvas 最常见的用途是渲染动画,目前,所有的主流浏览器都支持。 渲染动画的基本原理,...对于在每个动画帧上的重复相同的绘制操作,请考虑将其分流到屏幕外的画布上。然后根据需要频繁地将屏幕外图像渲染到主..
  • Android canvas

    千次阅读 2022-03-13 13:31:07
    Canvas是一个画布,可以在这个画布上进行各种绘图操作。 在Android中,想要获得一个Canvas对象主要有三种方法: ①继承一个View,并重写onDraw()方法。View的Canvas对象会被当做参数传递过来,在这个Canvas上进行的...
  • 简介HTML5 canvas 最初起源于苹果(Apple)的一项实验,现在已经成为了web中受到广泛支持的2D快速模式绘图(2Dimmediate mode graphic)的...已经存在众多优化canvas性能的方法了,但是还没有一篇文章将这些方法系统的...
  • Canvas中进行碰撞检测,大家往往直接采用游戏引擎(Cocos2d-JS、Egret)或物理引擎(Box2D)内置的碰撞检测功能,好奇的你有思考过它们的内部运行机制吗?下面将针对基本的碰撞检测技术进行讲解:1、基于矩形的碰撞...
  • //绘制前先清空画布 var canvasBGHeight = canvas . clientHeight - 20 ; //背景高度 var startRowLinePosition = canvas . clientWidth / data . length / 2 ; //圆球底横X坐标 ...
  • 集成式2D jsI2dJs-SVG +画布+ WebGL Integrated-2D-是一个开放源代码Javascript框架,用于在SVG,Canvas和WebGL上下文中呈现2D图形。 I2D的简单语法和语义使您可以将矢量图形和位图的功能结合起来,轻松实现复杂的...
  • Canvas的优势仅限于此吗? (苏炳添,亚洲百米第一人) HTML绘图届的前辈:SVG Canvas是HTML5时代引入的“新”标签。与很多标签不同,Canvas不具有自己的行为,只将一组API 展现给客户端 JavaScript ,让开发者使
  • canvas的使用

    2020-03-11 20:55:28
    canvas的使用 HTML5 < canvas > 标签是一个可以使用脚本(通常为JavaScript)来绘制图形的 HTML 元素,是众多广泛使用的网络 2D 图像渲染标准之一,可以用于绘制图表、制作图片构图或者制作动画 canvas 元素本身...
  • clipXXX方法族:在当前的画图区域裁剪(clip)出一个新的画图区域,这个 画图区域就是canvas对象的当前画图区域了。比如:clipRect(new Rect()), 那么该矩形区域就是canvas的当前画图区域getXxx方法族:获...
  • canvas 文字颜色_Canvas 超全教程

    千次阅读 2020-11-22 03:38:59
    canvas>是一个可以使用脚本(通常为JavaScript)来绘制图形的 HTML 元素.例如,它可以用于绘制图表、制作图片构图或者制作简单的(以及不那么简单的)动画.<canvas> 最早由Apple引入WebKit,用于Mac OS X 的 ...
  • 提高 HTML5 画布性能

    2021-06-13 16:53:58
    http://www.html5rocks.com/zh/tutorials/canvas/performance/#toc-intro简介HTML5 画布最初来自 Apple 的一项实验,是网络上最广泛支持的 2D直接模式图形标准。现在,许多开发人员都依靠 HTML5 画布开发各种多媒体...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 763
精华内容 305
热门标签
关键字:

多层画布canvas