canvas入门（一）

<canvas../>元素它是专门用来绘制图形的，但是它自身并不绘制图形，他只是相当于一块空的画布，任由开发者在其上利用javascript脚本进行绘制。

一般绘图需要一下.1：先获取canvas对应的dom对象，2.调用canvas对象的getContext（）方法，3.调用CanvasRenderingContext2D对象的方法绘图。

这是一个简单的例子：

<body>
  <canvas id="cvs"></canvas>
<script>
 var cvs=document.getElementById(‘cvs‘);

 var ctx=cvs.getContext(‘2d‘);
//  设置填充颜色
 ctx.fillStyle=‘black‘;
//  绘制矩形
 ctx.fillRect(30,40,80,100)

</script>

</body>

时间： 2024-12-29 15:29:49

canvas入门（一）的相关文章

canvas入门-3渐变方法

1.canvas中渐变方式有2种:线性渐变和径向梯度渐变 createLineGradient() createRadialGradient() addColorStop(var1,var2); var1 取值在0-1之间 var2 是颜色值前面有讲述线性渐变的作用,渐变是一个渐变对象径向渐变方法createRadialGradient创建放射状/圆形渐变对象 context.createRadialGradient(x0,y0,r0,x1,y1,r1); 渐变可用于填充矩形.圆形.线条.文

canvas入门-2路径、文字

1.canvas是一个二维网格坐标系 2.canvas路径 <script type="text/javascript">//绘制矩形 var oCanvas = document.getElementById('canvas-1'); var context = oCanvas.getContext('2d');//指向2d渲染环境的引用 context.moveTo(0,0); context.lineTo(0,100); context.lineTo(100,100)

canvas入门-1三种填充方式、渐变、模式

1.定义canvas的尺寸的时候最好用html的方式定义,用width和height的方式,用css会导致画布按照css设定的方式进行缩放,cavas内部是一个2d的渲染环境 2.一个canvas对应一个2d的渲染环境,绘制图形的操作都是在2d渲染环境中进行的 <canvas id="canvas-1" style="border:solid 1px gray;" width = "400" height="400"&g

Canvas入门（1）：绘制矩形、圆、直线、曲线等基本图形

来源:http://www.ido321.com/968.html 一.Canvas的基础知识 Canvas是HTML 5中新增的元素,专门用于绘制图形.canvas元素就相当于一块"画布",一块无色的透明区域.须要利用JavaScript编写在当中进行绘画的脚本. 在页面放置canvas元素非常easy.利用<canvas>标签.同一时候指定几个主要的属性:id,width和height.接下来通过几个小案例,跟我入门canvas吧~~~^_^~~~ 二.Canvas小案

canvas入门

<html> <head> <script> window.onload=function(){ var canvas=document.getElementById('cs'); //获取到canvas元素 var gt=canvas.getContext('2d'); //获取2d上下文对象 //[1] gt.fillRect(10,10,100,100) //在横坐标和纵坐标为10的地方创建一个长宽为100的方块 //[2]gt.strokeRect(10,10,

HTML5 Canvas入门

HTML5的canvas(画布)元素使用JavaScript在网页上绘制图像.下面以一个简单例子及其效果图(图1)开始: <!DOCTYPE HTML> <html> <head> <style type="text/css"> canvas{border:dashed 2px #CCC} </style> <script type="text/javascript"> /* canvas元素本

canvas入门笔记

1.Canvas的使用注意 A.要在页面中添加一对canvas标记,默认占300*150的区域 B.我们可以通过html属性'width','height'来设置canvas的宽高,不可以通过css属性来设置宽高. C.Canvas相当于是一张白纸,如果想要在这个白纸上绘图,你需要一套绘图工具获取绘图工具的方式:var ctx = Canvas.getContext('2d'); 练习: 2.Canvas绘制会用到的方法 ctx.moveTo(x,y):将绘图工具移动到x,y坐标点

02 Canvas 入门

<canvas id="demo" width="600px" height="600px"> ie9以上才支持 </canvas> <script> //1.拿到canvas标签 var canvas = document.getElementById('demo'); canvas.style.border="1px solid red"; //2.拿到canvas的上下文 var ct

canvas入门（画圆）

1.想在H5上画一个canvas,必须在页面上你需要的地方添加canvas标签, 1 <canvas id="myCanvas"></canvas> 接着需要给canvas赋值高度和宽度. 1 var canvas = document.getElementById("myCanvas"); 2 canvas.width =400; 3 canvas.height =400; //canvas会覆盖页面的一个区域,同时也会阻止这个区域事件