1.想在H5上画一个canvas,必须在页面上你需要的地方添加canvas标签,

 <canvas id="myCanvas"></canvas>                   

接着需要给canvas赋值高度和宽度。

 var canvas = document.getElementById("myCanvas");
canvas.width =400;
canvas.height =400; //canvas会覆盖页面的一个区域,同时也会阻止这个区域事件发生,所以在处理canvas区域的时候要慎重处理。
//canvas对象的颜色和阴影透明度属性,模块。

2.阴影处理API

context.shadowColor = 'rgba(50, 50, 50, 1.0)';
context.shadowOffsetX = 5;
context.shadowOffsetY = 5;
context.shadowBlur = 10;
context.lineWith = 10;当前线条的宽度,以像素计。
//获得画布的像素,ImageData对象,三个Api,
context.createImageData
context.getImageData
context.setImageData

3.画圆

var ctx = canvas.getContext("2d");      //返回CanvasRenderingContext2D 对象,canvas画图是通过这个对象来画的。
//开始一个新的绘制路径
ctx.beginPath();
//设置弧线的颜色为蓝色
ctx.strokeStyle = "blue";
//沿着坐标点(100,100)为圆心
ctx.arc(circle.x, circle.y, circle.r,0,2*Math.PI,true); 画圆6个参数,圆心坐标、半径、起始和终止的角度。最后一个规定应该逆时针还是顺时针绘图。False = 顺时针,true = 逆时针
ctx.closePath();
ctx.fillStyle = 'rgb(200,0,200)';
ctx.fill();

canvas入门(画圆)的更多相关文章

  1. canvas之画圆

    <canvas id="canvas" width="500" height="500" style="background ...

  2. Canvas 画圆

    原文地址:http://hi.baidu.com/lj2tj/item/557d8d1a65adfa721009b58b --------------------------------------- ...

  3. Html5学习2(Html表格、Html列表、Html5新元素、Canvas (坐标、路径、画圆、文本、渐变、图像))

    Html表格 1.表格中的表头:<th></th>.其中表头部分字体加粗,颜色深绿色 <h4>水平标题:</h4> <table border=& ...

  4. Canvas 如何画一个四分之一圆

    转: Canvas 如何画一个四分之一圆 HTML: Document JS: var c = document.getElementById('ctx') var ctx = c.getContex ...

  5. Canvas入门(1):绘制矩形、圆、直线、曲线等基本图形

    来源:http://www.ido321.com/968.html 一.Canvas的基础知识 Canvas是HTML 5中新增的元素,专门用于绘制图形.canvas元素就相当于一块“画布”,一块无色 ...

  6. HTML5 canvas入门

    HTML5 Canvas入门 <canvas> 标签定义图形,比如图表和其他图像,您必须使用脚本来绘制图形.在画布上(Canvas)画一个红色矩形,渐变矩形,彩色矩形,和一些彩色的文字. ...

  7. Canvas 入门案例

    五.  Canvas 入门案例 1.  canvas 圆形绘制 <!DOCTYPE html> <html lang="en"> <head> ...

  8. javascript画直线和画圆的方法(非HTML5的方法)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. 纯JS画点、画线、画圆的方法

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. mycat 9066管理端口 常用命令

    1.连接mycat 9066管理端口 命令:mysql -uroot -proot -P9066 -h127.0.0.1 -u:用户名 -p:密码 -P:端口 -h:ip地址例:linux路径切换到m ...

  2. iOS开发--QQ音乐练习,旋转动画的实现,音乐工具类的封装,定时器的使用技巧,SliderBar的事件处理

    一.旋转动画的实现 二.音乐工具类的封装 -- 返回所有歌曲,返回当前播放歌曲,设置当前播放歌曲,返回下一首歌曲,返回上一首歌曲方法的实现 头文件 .m文件 #import "ChaosMu ...

  3. 区间DP HDU 4283

    t个数据 n个权值 1->n 可以入栈调整顺序 花费 第k个出来 w[i]*(k-1); 求花费最少 #include<stdio.h> #include<string.h&g ...

  4. Placemat:快速生成占位图片器

    快速的生成一张指定大小的图片 最简单的用法就是使用以下三个网址: https://placem.at/peoplehttps://placem.at/placeshttps://placem.at/t ...

  5. 100114B

    bfs #include<iostream> #include<queue> #include<cstring> #include<cstdio> us ...

  6. pycharm使用错误排查

    1.pip安装扩展包报错 creating build/temp.linux-x86_64-3.4 x86_64-linux-gnu- -Wformat -Werror=format-security ...

  7. 【BZOJ-1974】auction代码拍卖会 DP + 排列组合

    1974: [Sdoi2010]auction 代码拍卖会 Time Limit: 10 Sec  Memory Limit: 64 MBSubmit: 305  Solved: 122[Submit ...

  8. cmd 利用IE打开网页

    "C:\Program Files\Internet Explorer\iexplore.exe" "http://dmsite.chinacloudsites.cn/r ...

  9. UVa 1328 Period

    数据范围较大,故用KMP求循环节 之后由小到大枚举长度范围,若该长度下有循环节就输出答案 还要注意输出格式.之前测试时候连着一串presentation error也是悲伤 #include<b ...

  10. AngularJs ngIf、ngSwitch、ngHide/ngShow

    在组合这些ng指令写到一篇文章里的时候,基本是有规则的,本兽会将功能相似相近的一类整合到一篇文章,方便理解和记忆. 这篇的三个指令也都是对DOM元素的操作,页面上显示/隐藏的判断,添加/移除的判断. ...