精华内容
下载资源
问答
  • HTML5画布——canvasHTML5元素用于图形的绘制,通过脚本 (通常是JavaScript)...contentcontent中的内容是当浏览器不支持canvas标签时显示的内容content定义一个有边框的画布,border属性是边框的宽度和边框的颜色2、...

    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

    展开全文
  • 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...

    HTML:

    CSS:

    body{

    margin: 0 auto;

    }

    #background {

    width: 1600px;

    height: 768px;

    margin: 0 auto;

    background: url(../Images/bg2.jpg) no-repeat;

    position: relative;

    }

    #canvas {

    width: 1024px;

    height: 768px;

    margin: 0 auto;

    }

    canvas{

    background: transparent;

    position:absolute;

    }

    #main {

    background: url(../Images/bg_ban.png) no-repeat;

    }

    在主画布某些对象绘制(这些都需要点击)。

    在动画画布中绘制更多的对象。然而,这个画布(动画一个)位于主画布上方,并且它阻止能够点击主画布中的对象。

    任何人都可以帮我理解为什么吗?

    2013-07-12

    PhuongTT

    展开全文
  • private void myDraw() { // TODO Auto-generated method stub Log.d("test", "myDraw()---");...Canvas canvas=sfh.lockCanvas(); canvas.drawRect(0,0,this.getWidth(),this.getHeight(),paint); canvas.drawTe
  • Canvas画布

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

    千次阅读 2019-06-28 16:23:25
    这个问题只要明白一点,canvas是可以多个的,canvas父级下面可以再有canvas下面还可以加的,如果因为多层canvas挡住了你的事件,你可以把那个整个图 拆成多个canvas来实现, 其中意思就像是你一个image就可以把效果...
  • 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中移动、在canvas上面进行标注、放大等 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <meta ...
  • WPF之路——Canvas布局(画布)

    万次阅读 2013-11-26 19:43:26
    Canvas为容器控件,用于定位 1.基本应用 可以把Canvas比作一个坐标系,所有的元素通过设置坐标来决定其在坐标系中的位置.这个坐标系的原点并不是在中央,而是位于它的左上角.见下图 元素设置坐标的方法共有四个:  ...
  • Canvas

    2020-01-10 13:23:34
    Canvas 源码
  • java awt画布Canvas is a GUI component that creates a rectangular box on the screen. It can be used to draw shapes or print text, it acts as a canvas. It can also be used to take user inputs. It is ...
  • <canvas id="layer1" width="200" height="200"></canvas> <canvas id="layer2" width="500" height="500"></canvas> </div> <script type="text/javascript"> function getRect(obj) { var x1 = obj....
  • Canvas使用

    千次阅读 2019-05-22 14:54:01
    Canvas使用 canvas是一个可以使用脚本(通常为JavaScript)来绘制图形的 HTML 元素.例如,它可以用于绘制图表、制作图片构图或者制作简单的(以及不那么简单的)。像echarts、antv就是使用canvas来绘制图表的 标签 首先要...
  • canvas 踩坑

    2018-11-12 20:01:14
    图片的服务器地址跟当前页面地址不同,即跨域访问图片进行canvas绘图,首先服务器要允许其他服务器跨域访问资源,其次需要在前端对图片设置 img.crossOrigin=‘Anonymous’,才不会对画布造成污染 若访问的图片...
  • canvas优化

    2020-01-30 13:28:26
    然而,随着网站和应用将canvas画布推至极限,性能开始成为问题。这篇博客是一些优化的技巧,后序还会继续添加更多的技巧 技巧列举: 将画布的函数调用集合到一起(例如,画一条折线,而不要画多条分开的直线) ...
  • Canvas基本用法

    千次阅读 2016-08-18 11:31:19
    Canvas的意思是画布,表现在屏幕上就是一块区域,我们可以再上面使用各种API绘制我们想要的东西。可以说,Canvas贯穿整个2D Graphics,android.graphics中的所有类,几乎都于Canvas有直接或间接的联系。所以了解...
  • Android canvas总结

    2014-11-12 21:09:07
    2、一个Canvas画布,绘制Bitmap操作; 3、绘制的东西 4、绘制画笔Paint(包括颜色和样式)  1、如何获得一个Canvas对象。   Canvas对象的获取方式有三种: 第一种,重写View.onDraw方法,View...
  • canvas的使用

    2020-03-11 20:55:28
    canvas的使用 HTML5 < canvas > 标签是一个可以使用脚本(通常为JavaScript)来绘制图形的 HTML 元素,是众多广泛使用的网络 2D 图像渲染标准之一,可以用于绘制图表、制作图片构图或者制作动画 canvas 元素本身...
  • Canvas的saveLayer理解

    千次阅读 2016-01-07 11:35:39
    Canvas 在一般的情况下可以看作是一张画布,所有的绘图操作如drawBitmap, drawCircle都发生在这张画布上,这张画板还定义了一些属性比如Matrix,颜色等等。但是如果需要实现一些相对复杂的绘图操作,比如多层动画,...
  • Canvas的意思是画布,表现在屏幕上就是一块区域,我们可以再上面使用各种API绘制我们想要的东西。可以说,Canvas贯穿整个2D Graphics,android.graphics中的所有类,几乎都于Canvas有直接或间接的联系。所以了解...
  • Android Canvas 基本使用

    2016-02-26 10:32:35
    Canvas的意思是画布,表现在屏幕上就是一块区域,我们可以再上面使用各种API绘制我们想要的东西。可以说,Canvas贯穿整个2D Graphics,android.graphics中的所有类,几乎都于Canvas有直接或间接的联系。所以了解...
  • Canvas 更加优雅

    2020-09-19 09:11:33
    使用多层画布去画一个复杂的场景 一般在游戏中这个优化方式会经常使用,但是在我们的背景特效中不经常使用,这个优化方式是将经常移动的元素和不经常移动的元素分层,避免不必要的重绘。 比如在游戏中,背景不经常...
  • android Canvas saveLayer

    2018-01-24 20:35:17
    Canvas 在一般的情况下可以看作是一张画布,所有的绘图操作如drawBitmap, drawCircle都发生在这张画布上,这张画板还定义了一些属性比如Matrix,颜色等等。但是如果需要实现一些相对复杂的绘图操作,比如多层动画,...
  • canvas的基本使用

    2015-08-08 16:51:30
    Android官方文档对Canvas的简介很好的介绍了Canvas的使用: [java] view plaincopy The Canvas class holds the "draw" calls. To draw something, you need 4 basic components: A ...
  • canvas>是一个可以使用脚本(通常为JavaScript)来绘制图形的 HTML 元素.例如,它可以用于绘制图表、制作图片构图或者制作简单的(以及不那么简单的)动画.<canvas> 最早由Apple引入WebKit,用于Mac OS X 的 ...
  • Android Canvas Layers

    2015-09-16 16:08:39
    Canvas 在一般的情况下可以看作是一张画布,所有的绘图操作如drawBitmap, drawCircle都发生在这张画布上,这张画板还定义了一些属性比如Matrix,颜色等等。 但是如果需要实现一些相对复杂的绘图操作,比如多层...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 676
精华内容 270
关键字:

多层画布canvas