【移动应用开发技术】html5 canvas 涂鸦_第1页
【移动应用开发技术】html5 canvas 涂鸦_第2页
【移动应用开发技术】html5 canvas 涂鸦_第3页
全文预览已结束

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

【移动应用开发技术】html5canvas涂鸦

<!DOCTYPE

HTML>

<html>

<body>

<canvas

id="myCanvas"

width="800"

height="600"

></canvas>

<script

type="text/javascript">

//

get

canvas

instance

var

canvas=document.getElementById("myCanvas");

var

ctx=canvas.getContext("2d");

//

draw

a

line

ctx.moveTo(10,10);

ctx.lineTo(150,50);

ctx.lineTo(10,50);

ctx.stroke();

//

draw

a

circle

ctx.beginPath();

ctx.arc(100,100,30,0,Math.PI*2,true);

ctx.closePath();

ctx.stroke();

//

fill

a

circle

ctx.fillStyle="#FF0000";

ctx.beginPath();

ctx.arc(100,200,30,0,Math.PI*2,true);

ctx.closePath();

ctx.fill();

//

create

linear

gradient

var

linearGrd=ctx.createLinearGradient(0,0,270,0);

linearGrd.addColorStop(0,"black");

linearGrd.addColorStop(0.5,"red");

linearGrd.addColorStop(1,"white");

ctx.fillStyle=linearGrd;

ctx.fillRect(120,230,140,40);

//

create

radial

gradient

var

radialGrd

=

ctx.createRadialGradient(400,400,50,400,400,100);

radialGrd.addColorStop(0,"red");

radialGrd.addColorStop(1,"white");

ctx.fillStyle=radialGrd;

ctx.fillRect(300,300,500,500);

//

draw

p_w_picpath

var

img=new

Image();

img.src="e.jpg";

img.onload=function(){

ctx.drawIma

人人文库> 全部分类> 专业文献 > IT计算机

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论