`

canvas学习

阅读更多

   

描述

HTML5 <canvas> 标签用于绘制图像(通过脚本,通常是 JavaScript)。

不过,<canvas> 元素本身并没有绘制能力(它仅仅是图形的容器) - 您必须使用脚本来完成实际的绘图任务。

getContext() 方法可返回一个对象,该对象提供了用于在画布上绘图的方法和属性。

本手册提供完整的 getContext("2d") 对象属性和方法,可用于在画布上绘制文本、线条、矩形、圆形等等。

 

浏览器支持

Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 <canvas> 及其属性和方法。

注释:Internet Explorer 8 以及更早的版本不支持 <canvas> 元素。

 

 

属性方法介绍:(颜色样式阴影)

1

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#0000ff";
ctx.fillRect(20,20,150,100);
默认为黑色

 



 

还有其他渐变的设置,不在意义列举。

2

 

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

var gradient=ctx.createLinearGradient(0,0,170,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");

// 用渐变进行填充
ctx.strokeStyle=gradient;
ctx.lineWidth=5;
ctx.strokeRect(20,20,150,100);

 

改变ctx的fillRect方法,只进行边框的绘制

 



 

3

ctx.shadowColor="black";
ctx.shadowBlur=20;
ctx.shadowOffsetX=20;

给画的矩形设置阴影,模糊级数,偏移量

 

方法

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

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

var grd=ctx.createLinearGradient(0,0,170,0);渐变开始点x,渐变开始点y;渐变结束点x,渐变结束点y
grd.addColorStop(0,"black");
grd.addColorStop(1,"white");

ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);

 

 

2、

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

var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,100);

 

3、放射源

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

var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,100);
  • 大小: 367 Bytes
  • 大小: 989 Bytes
分享到:
评论

相关推荐

    HTML Canvas 学习过程中的一些代码.zip

    HTML Canvas 学习过程中的一些代码HTML Canvas 学习过程中的一些代码 HTML Canvas 学习过程中的一些代码HTML Canvas 学习过程中的一些代码 HTML Canvas 学习过程中的一些代码HTML Canvas 学习过程中的一些代码 ...

    canvas学习.zip

    由于标题为"canvas学习.zip",并且描述提到了"canvas的官网小例子",我们可以从中了解到这个压缩包可能包含了一些用于学习`canvas`的实例代码。 `canvas`标签是一个内联元素,通过JavaScript API与之交互。在HTML中...

    canvas学习(十六):绘制时钟

    在本篇【canvas学习(十六):绘制时钟】中,我们将探讨HTML5中的Canvas API,它是Web开发中用于在网页上动态绘制图形的强大工具。Canvas API允许开发者使用JavaScript来绘制2D图形,包括简单的线条、形状以及复杂的...

    canvas学习(十二):图形透明及交叠效果设置

    在canvas学习中,图形透明及交叠效果是两个重要的概念,它们可以让我们创建出丰富的视觉效果和动态交互。本文将详细解析这两个知识点,并通过提供的标签和文件名来具体阐述。 首先,我们来看“图形透明”这个概念。...

    HTML5 Canvas学习笔记(1)处理鼠标事件

    这篇“HTML5 Canvas学习笔记(1)处理鼠标事件”着重讲解了如何利用Canvas API来监听和响应鼠标的点击、移动等事件。 Canvas API提供了几个关键的方法来处理鼠标事件,包括`addEventListener`用于绑定事件处理函数,`...

    canvas学习(二):弹跳小球

    在本篇【canvas学习(二):弹跳小球】中,我们将深入探讨HTML5的Canvas元素以及如何利用它来创建动态的、交互式的弹跳小球效果。Canvas是HTML5的一个重要特性,允许开发者在网页上进行动态图形绘制,为网页增添了...

    HTML5 Canvas学习笔记(5)游戏得分动画

    这篇“HTML5 Canvas学习笔记(5)游戏得分动画”着重讲解了如何利用Canvas技术来实现游戏中的得分动画效果。通过学习这篇笔记,我们可以深入了解Canvas的基本用法以及如何将它应用于游戏开发。 首先,Canvas是HTML5的...

    HTML5 Canvas学习笔记(2)菜单高亮显示与像素字体

    在“HTML5 Canvas学习笔记(2)菜单高亮显示与像素字体”这篇博文中,作者深入探讨了如何利用Canvas技术来实现菜单项的高亮显示以及如何处理像素字体,这两点在构建具有视觉吸引力和用户友好性的Web应用时非常重要。...

    HTML5 Canvas学习笔记(4)游戏界面的淡入淡出

    在本篇"HTML5 Canvas学习笔记(4)游戏界面的淡入淡出"中,我们将深入探讨如何利用Canvas来创建游戏界面的淡入淡出效果,这是一个增强用户体验的重要技巧,尤其在游戏加载、场景切换或过渡效果中。 首先,淡入淡出...

    HTML5 Canvas学习笔记(9)俄罗斯方块游戏之三(游戏面板)

    这篇“HTML5 Canvas学习笔记(9)俄罗斯方块游戏之三(游戏面板)”深入探讨了如何利用Canvas技术构建一个经典的游戏——俄罗斯方块。 在HTML5 Canvas上构建俄罗斯方块游戏,首先需要理解Canvas的基本结构和绘图API。...

    HTML5 Canvas学习笔记(7)俄罗斯方块游戏之一(色块)

    这篇“HTML5 Canvas学习笔记(7)俄罗斯方块游戏之一(色块)”着重介绍了如何利用Canvas构建经典游戏——俄罗斯方块的基础部分,即色块的绘制与移动。 首先,我们要理解HTML5 Canvas的基本结构。它是一个二维绘图...

    Android—BitMap与Canvas学习笔记

    Android—BitMap与Canvas学习笔记

    《HTML5 Canvas学习笔记(10)》数钱数到手抽筋

    这篇名为“HTML5 Canvas学习笔记(10) - 数钱数到手抽筋”的博客文章,很可能是讲解如何使用Canvas来模拟数钱动画或游戏的教程。在Canvas中实现这样的功能,需要掌握以下几个关键知识点: 1. **Canvas基本概念**:...

    canvas学习(三):炫丽的电子时钟

    在本篇博客“canvas学习(三):炫丽的电子时钟”中,作者通过HTML5的canvas元素展示了如何创建一个动态且具有视觉吸引力的电子时钟。canvas是HTML5中用于绘制图形的一个重要组成部分,它允许开发者用JavaScript来...

    HTML5 Canvas学习笔记(6)拼图游戏(数字版)

    在“HTML5 Canvas学习笔记(6)拼图游戏(数字版)”这篇博文中,作者分享了如何利用Canvas构建一个数字拼图游戏。下面我们将详细探讨这个知识点。 1. **HTML5 Canvas基础**: - Canvas是一个基于矢量图形的画布元素...

    HTML5 Canvas学习笔记(8)俄罗斯方块游戏之二(方块)

    这篇“HTML5 Canvas学习笔记(8)俄罗斯方块游戏之二(方块)”主要探讨了如何利用Canvas来实现经典游戏——俄罗斯方块的方块部分。我们将深入探讨相关知识点,包括Canvas基本操作、事件处理、动画原理以及游戏逻辑。 ...

    HTML5 Canvas学习

    炫酷的HTML5 canvas效果展示, 代码结构简单,有利于开发者参考使用。

    canvas学习和滤镜实现代码

    与SVG和VML不同的是,Canvas基于JavaScript的绘图API,而不是使用XML文档描述绘图。 Canvas API提供了一个通过画布的getContext()方法获得的绘图环境对象,开发者通过这个对象来执行绘图操作。其API种类繁多,包括...

Global site tag (gtag.js) - Google Analytics